how to create a circle around ordered <li> elements [duplicate] - css

Question

This question already has answers here:
Setting the width of inline elements
(7 answers)
What is the default display property of the :before and :after pseudo-elements?
(1 answer)
Closed 3 years ago.
Alright, this is really a simple question that I can't solve. I have an html document that looks like this:
<ol>
<li> item 1 </li>
<li> item 2 </li>
<li> item 3 </li>
</ol>
and the accompanying css looks like this:
ol {
list-style: none;
counter-reset: li-counter;
}
ol li {
counter-increment: li-counter;
}
ol li::before {
content: counter(li-counter);
color: #59cbbe;
font-weight: bold;
width: 20px;
height: 20px;
border: 2px solid black;
border-radius: 50px;
padding: 4px;
margin: 10px;
}
and here is the codepen
I have tried following and modifying this example, but wasn't able to get it. So I tried this one as well. The main issue that I am having, when you look at the code pen is that the circles are not circles, they are always oblong and oval weather I use 30px or 50% is there something that I am missing. Sorry if this is a really simple answer, but, I am not that great at css.

Answer 1

Well, you were on the right track. You just need to add display: inline-block to the pseudo element so the width:20px; height:20px will have effect. And so the pseudo-element will be a square + rounded border = circle.
inline-block :
Displays an element as an inline-level block container. The element
itself is formatted as an inline element, but you can apply height and
width values
As you can read up here default display of pseudo-elements the :before pseudo-element has display:inline ( just like a span ) which does not accept width and height
from w3schools :
Displays an element as an inline element (like <span>). Any height and
width properties will have no effect
ol {
list-style: none;
counter-reset: li-counter;
}
ol li {
counter-increment: li-counter;
}
ol li::before {
content: counter(li-counter);
color: #59cbbe;
font-weight: bold;
width: 20px;
height: 20px;
border: 2px solid black;
border-radius: 50px;
display: inline-block;
text-align: center;
padding: 4px;
margin: 10px;
}
<ol>
<li> item 1 </li>
<li> item 2 </li>
<li> item 3 </li>
</ol>