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.

    1 answer 1

    I do not know why you needed two pseudo-elements, but I deleted one and it looks like a solution

     ol{ list-style: none; counter-reset: num; padding-left: 20px; } li{ display:inline-block; display:flex; margin-top:10px; } ol li:before { content: counter(num) " "; counter-increment: num; color: #ff0054; font-weight: bold; font-size: 40px; padding:0 10px; margin-top:-5px; } 
     <ol> <li>Целенаправленность при одновременной бессмысленности содержания<br/> Рыбные тексты также применяются для демонстрации различных видов шрифта и в разработке макетов. </li> <li>Как правило их содержание бессмысленно. По причине своей функции текста-заполнителя для макетов<br/> нечитабельность рыбных текстов имеет особое значение, так как человеческое восприятие имеет особенность,<br/> распознавать определенные образцы и повторения. </li> <li>В случае произвольного набора букв и длины слов ничто не отвлекает от оценки воздействия и читаемости<br/> различных шрифтов, а также от распределения текста на странице (макет или площадь набора). Поэтому<br/> большинство рыбных текстов состоят из более или менее произвольного набора слов и слогов. </li> <li>Таким образом образцы повторения не отвлекают от общей картины, а шрифты имеют лучшую базу сравнения.<br/> Преимущественно конечно, если рыбный текст кажется в некоторой степени реалистичным, не искажая тем самым<br/> воздействие макета финальной публикации.</li> </ol> 

    • and how can the numbers be aligned on the upper border of the list items or vice versa, the list items on the upper border of the numbers? - Michael
    • @Michael corrected - right? - user33274
    • Yes, so norms, ATP. - Michael