I have a dynamically generated ordered list with a maximum of 105 items. I'm styling the li numbers with li:before, and everything is fine, but once the list gets to triple digits the numbers begin overlapping with the list items. This obscures the end of the number and part of li itself. What I want to do is have the li numbers be aligned by the last digit as opposed to the first digit. I'm not exactly sure how to ask this, which is probably why I'm having trouble finding an answer. Example below:
How the list item numbers seem to display by default:
1.
5.
10.
50.
100.
What I'm trying to achieve:
1.
5.
10.
50.
100.
I've experimented a bit with adding
direction: rtl
and
text-align-last: right
to the li:before, but neither seem to be doing anything.
Thanks for the help, and sorry if this is a stupid question!
EDIT: here's my css. Thanks!
li:before {
text-shadow: 2px 2px 4px #000000;
margin-left:-20px;
margin-top:25px;
content: counter(item);
color: white;
display: inline-block;
font-size:2rem;
direction: rtl;
text-align-last: right;
}