web-dev-qa-db-ja.com

疑似要素の前にテキストを中央揃えする方法は？

私はこのようなコードを持っています：

span {
  border-radius: 50%;
  background-color: #d8d9dd;
  border: 6px solid #262c40;
  width: 25px;
  height: 25px;
  margin: 30px 0 0 40px;
  display: block;
}
span:before {
  content: attr(data-value);
  position: relative;
  white-space: pre;
  display: inline;
  top: -27px;
  left: -29px;
  width: 200px;
  text-align: center;
}
<span data-value="November 2016"></span>
<span data-value="May 2016"></span>

テキストを：before疑似要素の中央に配置してスパンの中央に配置するにはどうすればよいですか？出来ますか？

csscenteringpseudo-element
8
jcubic

最良の方法は、一般的なセンタリング手法を使用して、beforeに関してpositionspan疑似要素絶対ににすることです。

top: 0;
left: 50%;
transform: translate(-50%, -25px);

-25pxは、円（高さ25px）の上のテキストをオフセットすることに注意してください-以下のデモを参照してください：

span {
  border-radius: 50%;
  background-color: #d8d9dd;
  border: 6px solid #262c40;
  width: 25px;
  height: 25px;
  margin: 30px 0 0 40px;
  display: block;
  position:relative;
}
span:before {
  content: attr(data-value);
  position: absolute;
  white-space: pre;
  display: inline;
  top: 0;
  left: 50%;
  transform: translate(-50%, -25px);
}
<span data-value="November 2016"></span>
<span data-value="May 2016"></span>
9
kukkuz

From [〜＃〜] mdn [〜＃〜] ：

[:before疑似要素]はデフォルトでインラインです

インライン要素にwidthを指定しても何も起こらないため、display: block（または、より適切な場合はinline-block）としてスタイルを設定する必要があります。また、テキストを円の中央に配置するには、left値を約-88pxに調整する必要があることもわかりました。

span {
  border-radius: 50%;
  background-color: #d8d9dd;
  border: 6px solid #262c40;
  width: 25px;
  height: 25px;
  margin: 30px 0 0 40px;
  display: block;
}
span:before {
  content: attr(data-value);
  position: relative;
  white-space: pre;
  display: inline;
  top: -27px;
  left: -88px;
  width: 200px;
  text-align: center;
  display: block;
}
<span data-value="November 2016"></span>
<span data-value="May 2016"></span>
3
lonesomeday

否定的な翻訳を使用しないことをお勧めします。注意深く行わないと、ビューポートの外に出てしまう可能性があります。

さらに、疑似要素を含むコンテンツを挿入しないでください。疑似要素は、スタイリングの目的でのみ使用する必要があります。このような：

body {
  display: inline-block;
}
span {
  display: block;
  text-align: center;
}
span:after {
  content: '';
  border-radius: 50%;
  background-color: #d8d9dd;
  border: 6px solid #262c40;
  width: 25px;
  height: 25px;
  margin: 10px auto 30px;
  display: block;
}
<span>November 2016</span>
<span>May 2016</span>

スパン内のテキストは、text-align: centerのために中央に配置されます。

margin-left: autoとmargin-right: autoにより、疑似要素の円は中央に配置されます。

2
Oriol

私はこれに殴られましたが、ここに私の解決策があります：

span {
   border-radius: 50%;
   background-color: #d8d9dd;
   border: 6px solid #262c40;
   width: 25px;
   height: 25px;
   margin: 30px 0 0 40px;
   display: block;
}
span:before {
   content: attr(data-value);
   position: relative;
   white-space: pre;
   display: inline-block;
   top: -27px;
   left: -50px;
   width: 125px;
   text-align: center;
}

変更点は、inline-blockスタイルで:before表示を使用し、テキストのleftとwidthを調整することです。

0
Chris Peacock

display:inline-block;を追加し、margin-left:-87pxを追加します。ここで87pxは

100px（全幅の50％200px）-13px（スパン幅の50％25px）

span {
  border-radius: 50%;
  background-color: #d8d9dd;
  border: 6px solid #262c40;
  width: 25px;
  height: 25px;
  margin: 30px 0 0 40px;
  display: block;
}
span:before {
  content: attr(data-value);
  position: relative;
  white-space: pre;
  display: inline-block;
  top: -27px;/*
  left: -29px;*/  
  margin-left: -87px;
  width: 200px;
  text-align: center;
}
<span data-value="November 2016"></span>
<span data-value="May 2016"></span>
0
jafarbtech