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