Большой нумерованный список: текст должен быть выровнен по большому номеру. ⇐ Html

[Anonymous]

У меня есть нумерованный список с большими круглыми номерами шагов на соответствующем изображении. Это работает, но нужно, чтобы текст и вспомогательный текст точно совпадали с круглым числом.
Как в шаге 3 на изображении.
Прикрепленный экран. Мой код ниже.

Изображение нумерованного списка;

Код: Выделить всё

/* Large bullet list */
ul_large {
counter-reset: section;
list-style: none;
}

li_large {
margin: 0 0 10px 0;
line-height: 40px;
}

li_large:before {
content: counter(section);
counter-increment: section;
display: inline-block;
width: 40px;
height: 40px;
color: white;
margin: 10px 20px 0 0;
border: 1px solid black;
background: black;
border-radius: 100%;
text-align: center;
font-size: 30;
font-weight: bold;

Код: Выделить всё

Step 1 text title here

Step 1 descriction with more information here.Step 1 descriction with more information here.

Step 1 descriction with more information here.



Step 1 descriction with more information here.


Step 1 descriction with more information here.


Step 1 descriction with more information here.




Step 2 text title here

Step 2 descriction with more information here.Step 2 descriction with more information here.Step 2 descriction with more information here

Step 2 descriction with more information here.Step 2 descriction with more information here.Step 2 descriction with more information here



Step 3 text title here

Step 2 descriction with more information here.Step 2 descriction with more information here.Step 2 descriction with more information here

Step 2 descriction with more information here.Step 2 descriction with more information here.Step 2 descriction with more information here


 

Подробнее здесь: https://stackoverflow.com/questions/795 ... rge-number