如何在伪元素之前居中文本？

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

最好的事情将是位置采用了流行的定心技术的before伪元素绝对关于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 2

从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>

Answer 3

我被打成这样，但这里是我的解决方案：

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 4

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

100px的-13px（跨度25像素的50％）（50整个宽度200像素的％）

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而居中。