How to center text inside :before pseudo element?

Question

I have code like this:

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>

How can I center the text inside :before pseudo element to be in the middle of the span? Is it possible?

Answer 1

The best thing would be to position the before pseudo element absolutely with respect to the span using the popular centering technique:

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

Note that -25px is to offset the text above the circles (which has height 25px) - see demo below:

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

From MDN:

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

Giving inline elements a width does nothing, so you need to style it as display: block (or inline-block if that is more appropriate). It also turns out that you need to adjust the left value to approximately -88px to get the text centred over the circle.

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

I recommend against using negative translations. It might end up outside the viewport if you don't do it enough carefully.

Moreover, you shouldn't insert contents with pseudo-elements. Pseudo-elements should only be used for styling purposes. Like this:

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>

The text inside the span is centered due to text-align: center.

The pseudo-element circle is centered due to margin-left: auto and margin-right: auto.