логотип PurpleSchool
Иконка входа
Вход
логотип PurpleSchool
Главная
База знаний
Псевдоэлемент marker в CSS. Полное руководство с примерами

Псевдоэлемент marker в CSS. Полное руководство с примерами

05 декабря 2024 г.
Автор

Дмитрий Нечаев

Псевдоэлемент ::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