When creating an ordered list in HTML, I encountered a challenge. I wanted to display the numbers in a different color from the text and also add a dot next to each number.
After some trial and error with CSS styling, I was able to achieve this effect successfully for single-digit numbers. However, I ran into an issue when the numbers became double digits (starting from 10). The dots were not properly aligned.
Does anyone have any suggestions on how to fix this formatting problem?
CSS:
ol {
list-style: none;
counter-reset: item;
li {
position: relative;
&::before {
content: counter(item);
counter-increment: item;
color: green;
display: inline-block;
width: 1em;
font-weight: bold;
margin-right: 0.5rem;
}
&::after {
position: absolute;
content: '.';
left: 12px;
color: green;
font-weight: bold;
}
}
}