Дмитрий Нечаев
Псевдоэлемент marker в CSS. Полное руководство с примерами
Псевдоэлемент ::marker
в CSS позволяет настраивать стиль маркеров, используемых в списках. Это даёт возможность дизайнерам более точно управлять внешним видом списка, улучшая визуальную привлекательность и соответствие стилистике веб-страницы. В этой статье мы подробно рассмотрим, как использовать псевдоэлемент ::marker
, какие свойства он поддерживает и приведем примеры применения.
Основные понятия
Что такое ::marker
?
::marker
— это CSS псевдоэлемент, предназначенный для стилизации маркеров элементов списка (<li>
). Маркеры — это символы или изображения, которые появляются перед каждым элементом списка.
Применение псевдоэлемента
Для применения стилей к маркерам элементов списка необходимо использовать синтаксис ::marker
в вашем CSS файле:
li::marker {
/* стили */
}
Поддерживаемые свойства
Псевдоэлемент ::marker
поддерживает ограниченное количество CSS свойств. Основные из них:
color
— цвет маркера;font-family
— шрифт маркера;font-size
— размер шрифта маркера;font-weight
— насыщенность шрифта маркера;content
— содержание маркера.
Пример использования
Рассмотрим простой пример, где мы изменим цвет и размер шрифта маркеров списка:
li::marker {
color: red; /* красный цвет маркера */
font-size: 20px; /* размер шрифта маркера */
}
Этот код изменит цвет маркеров списка на красный, а размер шрифта маркеров на 20 пикселей.
Поддержка браузеров
Важно учитывать, что не все свойства могут быть поддержаны в различных браузерах одинаково. На момент написания данной статьи псевдоэлемент ::marker
поддерживается большинством современных браузеров, включая:
- Google Chrome
- Mozilla Firefox
- Safari
- Microsoft Edge
Стилизация различных типов списков
Псевдоэлемент ::marker
можно применять как к неупорядоченным (<ul>
), так и к упорядоченным спискам (<ol>
).
Стилизация неупорядоченного списка
Пример применения ::marker
к элементам неупорядоченного списка:
ul li::marker {
color: green; /* зелёный цвет маркера */
font-size: 16px; /* размер шрифта маркера */
}
Стилизация упорядоченного списка
Пример применения ::marker
к элементам упорядоченного списка:
ol li::marker {
color: purple; /* фиолетовый цвет маркера */
font-size: 18px; /* размер шрифта маркера */
font-weight: bold; /* жирный шрифт маркера */
}
Практические примеры
Пример 1: Изменение цвета и шрифта маркеров в неупорядоченном списке
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример ::marker</title>
<style>
ul li::marker {
color: orange; /* оранжевый цвет маркера */
font-size: 20px; /* размер шрифта маркера */
}
</style>
</head>
<body>
<ul>
<li>Элемент списка 1</li>
<li>Элемент списка 2</li>
<li>Элемент списка 3</li>
</ul>
</body>
</html>
Пример 2: Использование пользовательского контента для маркеров
Вы также можете изменить содержимое маркеров с помощью свойства content
:
ul li::marker {
content: "✓ "; /* галочка как маркер */
color: green; /* зелёный цвет маркера */
}
Пример HTML:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример ::marker с пользовательским контентом</title>
<style>
ul li::marker {
content: "✓ "; /* галочка как маркер */
color: green; /* зелёный цвет маркера */
}
</style>
</head>
<body>
<ul>
<li>Элемент списка 1</li>
<li>Элемент списка 2</li>
<li>Элемент списка 3</li>
</ul>
</body>
</html>
Пример 3: Стилизация маркеров в упорядоченном списке
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример ::marker для упорядоченного списка</title>
<style>
ol li::marker {
color: blue; /* синий цвет маркера */
font-weight: bold; /* жирный шрифт маркера */
}
</style>
</head>
<body>
<ol>
<li>Элемент списка 1</li>
<li>Элемент списка 2</li>
<li>Элемент списка 3</li>
</ol>
</body>
</html>
Заключение
Псевдоэлемент ::marker
в CSS предоставляет мощный инструмент для стилизации маркеров списков, позволяя дизайнерам гибко управлять их внешним видом. Используйте примеры и рекомендации из этой статьи, чтобы сделать ваши списки более привлекательными и соответствующими общей стилистике вашего веб-сайта.
Карта развития разработчика
Получите полную карту развития разработчика по всем направлениям: frontend, backend, devops, mobile