如何在 :before 伪元素中居中文本？

Question

我有这样的代码：

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 伪元素中的文本居中放置在跨度的中间？可能吗？

Answer 1

来自MDN：

[the :before pseudo-element] is inline by default

给内联元素一个 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>

Answer 2

我被打败了，但这是我的解决方案：

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;
}

改动是在:before样式上使用inline-block显示，调整文字的left和width。

Answer 3

最好的办法是 position before 伪元素 absolutely 相对于 span使用流行的居中技术：

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>

Answer 4

添加 display:inline-block; 并添加 margin-left:-87px。其中 87px 来自

100px（全宽 200px 的 50%）-13px（跨度 25px 的 50%）

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>

Answer 5

我建议不要使用负面翻译。如果你做得不够小心，它可能最终会在视口之外。

此外，您不应该插入带有伪元素的内容。伪元素应该只用于样式目的。像这样：

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.

伪元素圆居中

Answer 6

我们应该使用 LOGICAL CODE 而不是任何命中和跟踪以及玩弄数字！

我在伪元素中使用 flex 使其首先在 span 元素上居中。

然后我使用转换逻辑定位伪元素。

/*styling to just make the presentation look good*/
body{
  border:5px solid black;
  padding:50px;
  display:flex;
  flex-direction: column;
  justify-content:center;
  align-items:center;
}

/* main stylings start here*/
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);
  width:150px;
  border:solid black 1px;
  
  /*use flex to center it to middle & upon the span*/
  display:flex;
  justify-content:center;
  align-items:center;
  
  /*use transform and position it LOGICALLY (by considering border widths of the parent span and ofcourse using calc() )*/
  transform: translate(calc(-50% + 2 * 6px), calc(-100% - 6px));
}

<span data-value="November 2016"></span>
<span data-value="May 2016"></span>

我会要求使用逻辑代码而不是破坏设计的命中值和跟踪值。编写响应代码。编码愉快！

如何在 :before 伪元素中居中文本？

How to center text inside :before pseudo element?

css

pseudo-element

centering