Увеличить отступ пунктов списка

200

31 марта 2018, 14:28

Как увеличить отступ текста от номера пункта списка?

.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>

Чтобы было как в примере. шрифт другой там, тут просто для примера.

Answer 1

Не знаю для чего вам нужно было два псевдоэлемента но я удалил один и похоже на решение

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>