Стилизация номеров строк (цифр) в списках ol(li)

304
13 февраля 2018, 06:17

ol { 
  counter-reset: myCounter; 
  list-style-type: none; 
} 
 
li { 
  list-style: none; 
} 
 
li:before { 
  counter-increment: myCounter; 
  content: counter(myCounter); 
  color: #f60; 
}
<ol start="3"> 
  <li> Посадить дерево </li> 
  <li> Построить дом </li> 
  <li> Вырастить сына </li> 
  <li> Накопать картошки </li> 
  <li> Вырастить дочь </li> 
  </ol

Как изменить цвет у чисел списка? Проблема в том, что если добавить counter, то новый список нумеруется начиная с 1, а это не нужно.

Answer 1

Вот так?

.list { 
  counter-reset: li+2; 
  list-style: none; 
} 
 
.list li:before { 
  content: counter(li); 
  counter-increment: li; 
  color: red 
}
<ol class="list"> 
  <li>Lorem</li> 
  <li>Ipsum</li> 
  <li>Dolor</li> 
  <li>Sit</li> 
  <li>Amet</li> 
  <ol>

READ ALSO
Непонятное поведение background-image. Наследование

Непонятное поведение background-image. Наследование

Доброго времени суток! Верстаю headerРазбит он на 3 секции

301
Верстка landing page. Сложный фон

Верстка landing page. Сложный фон

Всем привет! Недавно начал обучаться верстке сайтовКак реализовать такого рода фон? Чтобы это был не просто рисунок, а максимально адаптивный...

238
Как реализовать подобную кнопку на CSS

Как реализовать подобную кнопку на CSS

Возможно ли реализовать данную кнопку средствами CSS?

260