How to center text inside: in front of a pseudo-element?

Question

I have a 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 the pseudo-element is in the middle of the range? Is it possible?

Answer 1

It would be best to position the before pseudo-element absolutely relative to the span using the popular centering method:

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

Note that -25px is the offset of the text above the circles (25px high) - see the 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 :

[pseudo-element :before ] is embedded by default

Providing inline elements with a width does nothing, so you need to style it as display: block (or inline-block , if that works better). It also turns out that you need to adjust the left value to about -88px to get the text in the center of 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 using negative translations. This may be outside the viewport if you do not do it carefully enough.

In addition, you should not embed content with pseudo-elements. Pseudo-elements should only be used for styling. 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 .

Answer 4

I was beaten before that, but here is my solution:

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

The changes are to use the inline-block display in the :before style and to adjust the text left and width text.

Answer 5

Add display:inline-block; and add margin-left:-87px . where 87px obtained from

100px (50% of the entire width of 200px) -13px (50% of the width of the range 25px)

 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>