Списки — хороший способ упорядочить контент, сделать его читабильнее, понятнее и разбавить текстовую верстку. Но не каждый список справится с этой задачей. Давайте рассмотрим, как можно создать сложные интересно выглядящие списки.

Специальные символы

У большинства шрифтов есть много дополнительных символов, намного больше, чем только алфавит, цифры и стандартные символы. Например, шрифт Libertad, созданный TipoType, относится именно к таким шрифтам и имеет дополнительные символы в кружках:

По умолчанию нумерованные списки используют тот же шрифт для номеров пунктов списка, что и для самого списка, а для отображения специальных символов вместо стандартных цифр нужно отключить стили по умолчанию для нумерованных списков:

ol { list-style-type: none; }

После этого заменим обычные цифры специальными из шрифта и зададим их расположение:

ol li:before {
    position: absolute;
    margin-left: -2.7rem;
    margin-top: -.7rem;
    font-size: 2rem;
    font-weight: 100;
}

Пример ниже — демонстрация с сайта CodePen — использует несколько другой код CSS и другие специальные символы цифр:

В отличие от другого примера создания нумерованных списков, в этом случае не получится использовать счетчик, так что каждому элементу пункта списка задается значение, которое соответствует нужному специальному символу. Обратите внимание, что указывается не запись символа в формате Unicode, которая видна в таблице символов этого шрифта, например, для единицы в кружке это U+2460, а экранированная обратной косой чертой, т. е., \2460:

ol li:nth-child(1):before { content: "\2460"; }
ol li:nth-child(2):before { content: "\2461"; }
ol li:nth-child(3):before { content: "\2462"; }

Вот еще один пример использования такой записи:

Одно из ограничений такого подхода — список с подобными стилями не может состоять из более чем девяти пунктов, так как большинство шрифтов с дополнительными символами содержит только девять чисел в кружках. Но очень длинные списки встречаются не так часто, и в любом случае для них нужен другой метод.

Пункты со стрелками

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

ul { list-style-type: none; }
ul li:before {
    position: absolute;
    margin-left: -2.5rem;
    content: "\2192";
}
dt { margin-left: 2.5rem; }
dt:before {
    position: absolute;
    margin-left: -2.5rem;
    content: "\2192";
}
dd { margin-left:6rem; }

Эти стили для ненумерованного списка и определений терминов добавляют стрелки из шрифта Libertad, подобные стрелкам элемента HTML → :

Примеры подобных списков встречаются очень часто, и существует огромное количество других вариантов оформления.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Создание автоматического добавления QR кодов на веб-страницы
• Создание дробей с помощью замены на символ из шрифтов OpenType
• Использование свойства CSS размера табуляции для сохранения пробела