Список с настраиваемым маркером

Списки являются неотъемлемыми элементами каждого сайта. И разработчиками w3c предусмотрен определенный стандартный функционал, за пределы которого, редко кто выходит. Как правило, списки используют в качестве ненумерованного или нумерованного вертикального/горизонтального перечисления контента. И стилизуют обычно только текст или маркеры. По этой причине списки приедаются и не выделяются таким образом, чтобы привлечь гостей сайта. В этом уроке мы с вами оформим наш список нестандартным образом. А что, если вместо стандартных (1, 2, 3, 4...) мы хотим, чтобы наш список маркировался как (пункт 1:, пункт 2: и т.д.) ? Давайте попробуем этого добиться. Также сделаем стиль шрифта и цвет маркера отличным от контента списка.

Для создания списка с настраиваемым маркером вам надо перекопировать следующие части кодов:

                <ol class="special_markers">
                    <li>
                        Lorem ipsum dolor sit.
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, consequuntur.
                    </li>
                    <li>Lorem ipsum dolor sit amet consectetur.</li>
                    <li>Lorem ipsum dolor sit amet consectetur.</li>
                    <li>Lorem ipsum dolor sit amet consectetur.</li>
                    <li>Lorem ipsum dolor sit amet consectetur.</li>
                    <li>Lorem ipsum dolor sit amet consectetur.</li>
                    <li>Lorem ipsum dolor sit amet consectetur.</li>
                </ol>

            

                .special_markers {
                    max-width: 500px;
                    padding-right: 7px;
                }
                .special_markers li {
                    counter-increment: SpecialMarker;
                    margin-bottom: 15px;
                    list-style: none;
                    color: cadetblue;
                }
                .special_markers li::before {
                    content: "пункт " counter(SpecialMarker) ": ";
                    font-family: cursive;
                    font-weight: 700;
                    font-size: 24px;
                    color: red;
                    margin-right: 10px;
                }
            

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

1. number1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, consequuntur.
2. number2
3. number3
4. number4
5. number5
6. number6
7. number7

Наш список готов. Для корректной работы маркеров списка рекомендуем не менять класс тега ol и не вносить изменения в селекторе CSS: .special_markers li::before {}, если не обладаете опытом работы со свойством content.