最好是使用流行的居中技术相对于span * 绝对***定位 * before伪元素：

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

请注意，-25px是为了将文本偏移到圆圈上方（圆圈高度为25 px）-请参见下面的演示：
x一个一个一个一个x一个一个二个x
Source

从MDN开始：
[the :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>

我建议不要使用负的翻译，如果你不小心的话，它可能会在 windows 之外结束。
此外，你不应该插入带有伪元素的内容。伪元素应该只用于样式的目的。比如：

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，伪单元圆居中。

我们应该使用逻辑代码，而不是任何命中和跟踪和玩弄数字!
我在伪元素中使用了flex，使其首先在span元素上居中。
然后我使用transform来逻辑地定位伪元素。

/*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>

我会要求使用逻辑代码，而不是设计突破命中和跟踪值。写响应代码。快乐编码!

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

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。

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

在我的例子中，我需要在pseudo的content元素中水平居中一个html符号，所以我使用了line-height属性：

details summary::after{
    content: "›";
    border-radius: 100%;
    position: absolute;
    color: #64C1E3 ;
    right: 10px;
    top: 20px;
    width: 20px;
    height: 20px;
    display: flex;
    z-index: 1;
    border: 1px solid #64C1E3;
    transform: rotate(90deg);
    justify-content: center;
    font-size: 30px;
    line-height: 14px;
    font-family: emoji;
    transition: .5s;
}