добавить обивка для содержания RTL после использования row_number CSS

Question

Я использовал ниже код CSS для номера добавить строки к таблице строк:

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; 
} 

, но его содержание не совпадают сразу после десятой строки. Смотрите рисунок ниже:

Но я хочу что-то вроде этого:

Я также пытаюсь добавить padding, но это не рабочий раствор.

Как это исправить?

Это мой Fiddle сейчас.

Answer 1

Вы можете установить min-width из 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; 
} 

Answer 2

Убедитесь, что вы поместите номер в элемент, например:

<input type="checkbox"> <div class="number">10</div> 

Тогда вы можете стилизовать этот элемент, чтобы иметь минимальную ширину:

.number { 
    min-width:20px; 
} 

Таким образом, они имеют тот же с, и вам не нужно смешно padding в зависимости от того, сколько цифр у номера.