我有这样的代码：
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>
如何将文本居中：在伪元素位于跨度的中间之前？可能吗？
解决方法
最好的方法是使用流行的居中技术绝对相对于跨度定位前伪元素：
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>
