How to increase text indent from item number in list?
.sho_ol-red, .sho_ol-black { list-style: none; counter-reset: num; padding-left: 20px; } .sho_ol-red li::before { content: counter(num) " "; counter-increment: num; color: #ff0054; font-weight: bold; font-size: 40px; } .sho_ol-black li::before { content: counter(num) " "; counter-increment: num; color: black; font-weight: bold; font-size: 40px; } <ol class="sho_ol-black"> <li>Целенаправленность при одновременной бессмысленности содержания<br/> Рыбные тексты также применяются для демонстрации различных видов шрифта и в разработке макетов. </li> <li>Как правило их содержание бессмысленно. По причине своей функции текста-заполнителя для макетов<br/> нечитабельность рыбных текстов имеет особое значение, так как человеческое восприятие имеет особенность,<br/> распознавать определенные образцы и повторения. </li> <li>В случае произвольного набора букв и длины слов ничто не отвлекает от оценки воздействия и читаемости<br/> различных шрифтов, а также от распределения текста на странице (макет или площадь набора). Поэтому<br/> большинство рыбных текстов состоят из более или менее произвольного набора слов и слогов. </li> <li>Таким образом образцы повторения не отвлекают от общей картины, а шрифты имеют лучшую базу сравнения.<br/> Преимущественно конечно, если рыбный текст кажется в некоторой степени реалистичным, не искажая тем самым<br/> воздействие макета финальной публикации.</li> To be like in the example . the font is different there, just for an example.