Рассмотрим такой элемент HTML, как список.
Начнём с азов. Простейший список реализуется при помощи тегов ul, ol и li:
<ul>
<li>Рыжик</li>
<li>Мурзик</li>
<li>Барсик</li>
</ul>
Выглядит список так:
Убираем нумерацию, поля и отступы из упорядоченного списка:
<style>
ol{
list-style: none;
margin: 0;
padding: 0;
}
ol li{
clear: both;
margin: 0 0 10px 0;
padding: 0;
}
</style>
<ol>
<li>Рыжик</li>
<li>Мурзик</li>
<li>Барсик</li>
<li>Васька</li>
</ol>
Если нам не нравятся чёрные кружочки у списка, то с помощью стиля list-style-type: square меняем их на чёрные квадратики.
Если вам не нравятся и чёрные квадратики, то можете использовать белые кружочки при помощи стиля list-style-type: circle.
Полный список доступных маркеров.
В некоторых случаях удобнее нарисовать свой маркер и использовать его в списках. Для этого нам понадобится стиль list-style-image: url (image_filename). Например, мы хотим использовать в качестве маркера звёздочку:
Можно использовать сокращённую запись list-style: url(star.jpg);
Благодаря CSS-счётчикам мы можем стилизовать маркеры через псевдоэлементы. Сначала удаляем list-style, затем к маркерам применяются счётчики псевдоэлементов.
#awesome {
list-style: none;
counter-reset: my-awesome-counter;
}
#awesome > li {
counter-increment: my-awesome-counter;
margin: 0.25rem;
}
#awesome > li::before {
content: counter(my-awesome-counter);
background: #6699ff;
width: 2rem;
height: 2rem;
border-radius: 50%;
display: inline-block;
line-height: 2rem;
color: white;
text-align: center;
margin-right: 0.5rem;
}
<ol id="awesome">
<li>Рыжик</li>
<li>Мурзик</li>
<li>Барсик</li>
<li>Васька</li>
</ol>
Мы создали счётчик-инкремент для псевдоэлементов пунктов списка через counter-increment: my-awesome-counter. Через двоеточие прописывается название счётчика. Оно может быть произвольным. Текстовое содержимое счётчика задаётся с помощью свойства content. Теперь в псевдоэлементах будет выводиться значение счётчика. В первом элементе – 1, во втором – 2 и т.д. Для вложенных списков может понадобиться свойство counter-reset: my-awesome-counter, чтобы сбросить счётчик внутри вложенного списка. Тогда во вложенном списке отсчёт тоже начнётся с единицы.
Также можно сделать многоуровневый список по этой технике.
В 2021 году Firefox (позже и Chrome) стали поддерживать новый элемент ::marker.
#brandnew li::marker {
font-size: 90%;
font-weight: bold;
color: red;
}
Элемент поддерживает ограниченное число CSS-свойств, поэтому проверяйте в деле. Поддерживаются свойства шрифтов, цвет текста. Но, к примеру, не поддерживается фон.
Добавим к новому маркеру квадратные скобки.
#brandnew2 li::marker {
font-size: 90%;
font-weight: bold;
color: red;
}
ol#brandnew2 li::marker {
content:"[" counter(list-item)"] ";
color: rgba(0,0,0,0.5);
}