Стилизация маркеров списка в CSS

Стилизация маркеров списка в CSS

От автора: нет ничего необычного в том, что мы хотим стилизовать маркеры элементов списка. Например, синие точки и черный текст в ненумерованном списке. Или красные кружки с белым текстом в нумерованном списке.

Есть рабочий проект спецификации, в котором описывается псевдоэлемент ::marker, с помощью которого можно стилизовать маркеры списка.

/* Нигде не поддерживается; код может измениться */
li::marker {
  color: blue;
}

Благодаря CSS счетчикам у нас появилась такая возможность. Суть в том, что сперва удаляется list-style, а затем маркеры применяются через счетчики псевдоэлементов.

ol {
  list-style: none;
  counter-reset: my-awesome-counter;
}
li {
  counter-increment: my-awesome-counter;
}
li::before {
  content: counter(my-awesome-counter);

}

Автор: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree