Нумерованные списки могут быть инкрементированны разными способами, но настройка внешнего вида цифр в таких списках довольно сложна. Один из способов создания особого оформления цифр пунктов — это использование шрифтов формата OpenType и свойства font-feature-settings (настройки особенностей шрифта), но есть и более простой путь. С помощью недооцененного свойства счетчиков CSS, которое обычно используется для создания нумерованных списков с подпунктами, можно настроить расстояние между цифрой и текстом.

Возьмем обычный код HTML для нумерованного списка:

<h1>Clarke’s Three Laws</h1>
<ol id="clarke-laws">
        <li>When a distinguished but elderly scientist states that something is possible, he is almost certainly right. When he states that something is impossible, he is very probably wrong.
        <li>The only way of discovering the limits of the possible is to venture a little way past them into the impossible.
        <li>Any sufficiently advanced technology is indistinguishable from magic.
</ol>

Отключим стандартное отображение нумерованного списка, зададим свойство сброса счетчика с переменной point (пункт) и оттолкнем цифру влево:

ol#clarke-laws {
        line-height: 1.6;
        list-style-type: none;
        counter-reset: section;
        margin-left: 3rem;
}

Каждый новый элемент пункта списка увеличивает переменную point на единицу:

ol#clarke-laws li {
        counter-increment: point;
        margin-top: 2rem;
}

Таким образом значение переменной point добавляется перед каждым элементом пункта списка с помощью псевдоселектора до и ему задаются свойства CSS:

ol#clarke-laws li:before {
        content: counters(point,"");
        border: 2px solid #000;
        border-radius: 50%;
        display: inline-block;
        float: left;
        width: 3.5rem;
        height: 3rem;
        text-align: center;
        padding-top: .25rem;
        font-weight: 700;
        margin-left: -5rem;
        margin-right: 1rem;
        background: rgba(0,0,0,0.025);
}

Добавление адаптивных точек перехода

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

@media screen and (max-width: 30em) {
        ol#clarke-laws  {
                margin-left: 0;
        }
        ol#clarke-laws li:before {
                display: block;
                float: none;
                margin: 1rem auto;
        }
}

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

В некоторых шрифтах, например таких, как Libertad, есть цифры в кружках. Так что если Вам нужно создать список с ограниченным количеством элементов пункта списка, можно просто задать каждому псевдоэлементу до этих пунктов списка значение кода подходящего символа HTML, используя для этого псевдокласс энного потомка.

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

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

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