Having a simple unordered list of links and using pseudo elements to generate numbers for the list, I encountered an issue with centering the number vertically within its circle background in Internet Explorer 11.
Here is the HTML code:
<ul>
<li class="list-item">
<a>Link 1</a>
</li>
<li class="list-item">
<a>Link 2</a>
</li>
<li class="list-item">
<a>Link 3</a>
</li>
</ul>
And here is the SCSS code:
.list-item {
counter-increment: step-counter;
margin-bottom: 1.5rem;
color: $c-white;
font-size: 1.4rem;
line-height: 3.5rem;
a {
position: relative;
padding-left: 3.8rem;
&:before {
color: $c-white;
content: counter(step-counter);
font-size: 1.3rem;
height: 2.4rem;
width: 2.4rem;
border-radius: 50%;
margin-right: 20px;
position: absolute;
left: 0;
text-align: center;
line-height: 2.6rem;
top: -.5rem;
background-color:teal;
}
}
}
The issue with the numbers in IE11 can be seen in this link:
IE11 Numbers Issue
In comparison, the numbers display correctly in all other browsers as shown in this link:
Other Browsers Numbers Display