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

Списки являются неотъемлемыми элементами каждого сайта. И разработчиками 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.