Списки являются неотъемлемыми элементами каждого сайта. И разработчиками 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; }
После копирования вышеупомянутых кусков кода, у вас должен появиться такой список:
Наш список готов. Для корректной работы маркеров списка, рекомендуем не менять класс тега ol и также не вносить изменения в селекторе CSS: .special_markers li::before {}, если не обладаете опытом работы со свойством content.