add padding for RTL content after use row_number CSS

Question

I used below CSS code for add row number to a table rows:

table {
    direction: rtl;
    counter-reset: line-number;
}

td:first-child {
    text-align: right !important;
}

td:first-child:before {
    content: counter(line-number) ".";
    counter-increment: line-number;
    padding-right: 0.3em;
    color: lightgray;
}

but it's content not align right after tenth row. See below image:

But I want something like this:

I also try add padding but it's not a working solution.

How fix this?

This is my Fiddle now.

Answer 1

You can set min-width of td:first-child:before.

td:first-child:before {
content: counter(line-number) ".";
counter-increment: line-number;
padding-right: 0.3em;
color: lightgray;
min-width: 20px;
display: inline-block;
}