Стили для списков

Стили для списков начинаются с приставки list-style-. К ним относятся: list-style-type, list-style-position, list-style-image и объединенное свойство list-style. Рассмотрим их  последовательно.

Стили маркеров (цифр). Свойство list-style-type

И для маркированных, и для нумерованных списков внешний вид маркеров или цифр определяет свойство list-style-type. Оно имеет следующие значения:

Для маркированных списков:

1. disc - темная точка (значение по умолчанию)
2. circle - кружок
3. square - в виде темного квадрата

Для нумерованных списков:

1. desimal - 1, 2, 3 ... - арабские цифры (значение по умолчанию);
2. decimal-leading-zero - 01, 01, 03 - арабские цифры с ведущим нулем в первой десятке;
3. lower-alpha, lower-latin - строчные (маленькие) латинские буквы.
4. upper-alpha, upper-latin - прописные (большие) латинские буквы;
5. lower-roman - строчные римские цифры;
6. upper-roman - прописные римские цифры;
7. lower-greek - строчные греческие буквы;
8. upper-greek - прописные греческие буквы;
9. armenian - армянская нумерация;
10. georgian - грузинская нумерация.

Посмотреть на варианты отображения различных маркеров можно ниже. Хотя в примере и используется список ol, но маркеры с помощью кнопок могут назначаться, как и для ul. В реальной практике этого следует избегать.

Свойство list-style-position

Определяет позицию маркера. Бывает:

1. outside -маркер расположен снаружи текста (значение по умолчанию);
2. inside - маркер встроен внутрьтекста и обтекается им;
3. inherit - свойство наследуется от родителя (как правило, во вложенных списках).

Как правило, если используют это свойство, то со значением inside, т.к. значение outside применяется по умолчанию, а inherit используется очень редко.

Пример с использование list-style-position: inside:

1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore impedit aliquam dolores tempora nisi sapiente, dolorem nihil, harum consequuntur porro ab in eveniet aspernatur esse!
2. Harum modi architecto perferendis officiis labore voluptate eveniet aut alias minima excepturi quaerat quod atque eum dolorem, unde porro sit deserunt dolor dolorum expedita, veniam.
3. Reprehenderit ullam saepe recusandae corporis dignissimos impedit voluptates suscipit delectus, facilis officia quisquam perspiciatis, excepturi autem! Dolor non tempora sint facilis labore autem harum quisquam.
4. Dicta ducimus, pariatur, magni molestiae temporibus excepturi dignissimos dolores repudiandae soluta quos, voluptate laborum. Ullam nemo, cum corporis dignissimos, fugit similique omnis placeat assumenda modi?

Изображения вместо маркеров или цифр. Свойство list-style-image

Вы можете заменить обычные маркеры или цифры на подходящие для ваших целей изображения. Это задается с помощью свойства list-style-image. Значения этого свойства - это none (т.е. отсутствие изображения - вариант по умолчанию) или url(путь_к файлу_изображения.расш).

Путь к файлу указывается либо относительно положения html-файла, либо в виде абсолютного пути вместе с именем сайта.

Например:

Следует учитывать, что изображения в качестве маркеров имеют приоритет перед самими маркерами или цифрами, поэтому будут их перекрывать.

Пример:

Чтобы удалить маркер в виде изображения, необходимо записать:

Свойство list-style

Свойство list-style является универсальным (обобщенным) и содержит в себе перечисление предыдущих трех:

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

Или так:

Или так:

Используем псевдоэлементы ::before и ::marker для оформления списков

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

Для начала давайте заменим точки у маркированного списка на небольшие черточки + сделаем их красными. Для этого необходимо отключить стандартные маркеры и использовать псевдоэлемент ::before.

Вот, что получилось:

Для псевдоэлемента ::before можно также использовать различные HTML-спецсимволы. Например, для добавления длинного тире можно использовать спецсимвол —. Однако для записи его в свойстве content необходимо Unicode-написание этого символа с обратным слэшом в начале.

Так будет выглядеть сейчас наш список:

Давайте теперь попробуем добавить размеры, рамку и изменение цвета нового маркера при наведении на элемент списка.

Наведите на элементы списка.

Следующим образом можно реализовать список с отмеченными пунктами. В чем-то он похож на стилизацию чекбоксов.

Вот как это выглядит:

• Head
• Shoulders
• Knees
• Toes

С помощью псевдоэлемента ::before можно заменить изображение-маркер на html-символ, если подобрать подходящий.

Если вы всего лишь хотите поменять цвет маркера по сравнению с цветом текста списка или сделать его полужирным, достаточно использовать псевдоэлемент ::marker. Он сработает и для маркированного, и для нумерованного списка. Единственный минус - псевдоэлемент ::marker поддерживается в Firefox 68+ иSafari 11.1+и с ограничениями в Chrome и Edge 80+. Ряд мобильных браузеров пока его не поддерживает.

Допустимые свойства CSS для ::marker

• animation-*
• transition-*
• color
• direction
• font-*
• content
• unicode-bidi
• white-space

Если вы хотите изменить содержиме псевдоэлемента ::marker, используйте свойство content, как и в псевдоэлементе ::before.

Пример стилизации маркеров списков с помощью псевдоэлемента ::marker.

Посмотрим, как это выглядит на 2-х списках.

Вы можете посмотреть на различные варианты оформления списков в примере ниже.

See the Pen CSS Маркеры для списков by Elen (@ambassador) on CodePen.

Изменение вида счетчиков в нумерованных (упорядоченных списках)

Для нумерованных (упорядоченных) списков, которые формируются с помощью тега <ol>, необходимо также менять внешний вид нумерации (счетчиков) с помощью оформления псевдоэлементов ::before. Однако тут важно, чтобы нумерация продолжалась с каждым новым элементом списка. Поэтому в стилях для элементов li такого списка (в примере он имеет id="circle-counter") необходимо задать свойство  counter-increment: list (значение может быть любым словом), а в css для псевдоэлемента ::before нужно использовать это значение в свойстве content: counter(list).

Посмотрите, что получилось:

Внизу списка есть переключатели, которые дают возможность протестировать несколько значений для свойства counter-increment: с отрицательными значениями, четные, через 10 единиц.

Нумерация для элементов, которые не являются списками

Ниже вы найдете пример, в котором с помощью псевдоэлемента ::before нумерация назначается для элементов типа <section>. Причем нумерация идет в виде 01, 02, 03 и т.д. Это реализуется элементарно для нумерованных списков с помощью свойства list-style-type: decimal-leading-zero, как в примере выше, а вот для несписков это придется делать с помощью дополнительного счетчика.

Неким минусом этого подхода является то, что вам нужно сдвинуть контент в <section> слева за счет свойства padding-left: 60px, чтобы абсолютно позиционированный псевдоэлемент ::before не наползал на текст.

Примеры стилизации списков с codepen.io

Еще несколько примеров со стилизацией списков:

Анимация маркированного списка при наведении от Yair Even Or .

See the Pen Better bullets for lists by Yair Even Or (@vsync) on CodePen.

Список со скошенными краями от Natalia на основе трансформаций и линейного градиента.

See the Pen A simple folded list with CSS only by Natalia 🤟 (@natszafraniec) on CodePen.

Опять скошенный список с 2-мя вариантами размещения текста от Josh Bader.

See the Pen Tiltlist by Josh Bader (@joshbader) on CodePen.

Нумерованный список от Sheelah Brennan.

See the Pen CSS counters with ordered list by Sheelah Brennan (@sheelah) on CodePen.

Древовидные списки от Chris Bolson

See the Pen Tree list styling ul by Chris Bolson (@cbolson) on CodePen.

Оформление многоуровневого (вложенного) списка.

See the Pen <ul>Tree View - unlimited nested levels by Chris Bolson (@cbolson) on CodePen.