Как сменить вид маркера

Хочу изменить вид маркера на другой символ. Как это сделать?

Изменить вид маркеров в списке и заменить их на другой символ.

Решение

С помощью HTML или CSS допускается устанавливать один из трех типов маркеров: disc (точка), circle (кружок), square (квадрат). Добавлять эти значения нужно к стилевому свойству list-style-type , которое указывается для селектора UL или LI (пример 1).

Пример 1. Стандартные маркеры

HTML5 CSS 2.1 IE Cr Op Sa Fx

В данном примере в качестве маркеров используется квадрат (рис. 1).

Рис. 1. Вид маркеров

Выбор и установка собственного символа маркера происходит весьма своеобразно, через псевдоэлемент :before . Вначале следует вообще убрать маркеры у списка, присвоив значение none стилевому свойству list-style-type , а затем добавить псевдоэлемент :before к селектору LI . Сам вывод символа осуществляется с помощью свойства content , в качестве значения которого и выступает желаемый текст или символ (пример 2).

Пример 2. Использование :before и content

HTML5 CSS 2.1 IE Cr Op Sa Fx

В данном примере маркер, установленный по умолчанию, прячется, а взамен добавляется символ (рис. 2).

Рис. 2. Маркеры в виде символа

Чтобы установить в качестве маркера какой-нибудь хитрый символ, можно воспользоваться программой Microsoft Word или таблицей символов, это стандартная программа входящая в комплект Windows. Кодировка кода должна быть обязательно UTF-8.

Как изменить цвет маркеров в списке?

Существует два популярных способа изменения цвета маркеров, чтобы они отличались от цвета текста.

Использование

При этом цвет маркеров определяется стилевым свойством color для селектора li , а цвет текста — для селектора span (пример 1).

Пример 1. Использование вложенных тегов

Результат данного примера показан ниже (рис. 1).

Рис. 1. Маркеры, отличающиеся по цвету от основного текста

Несмотря на простоту, метод неудобен, особенно при объёмных списках, ведь к каждому пункту списка теперь придётся добавлять .

Использование ::before

Пример 2. Использование псевдоэлемента ::before

Результат данного примера показан на рис. 2.

Рис. 2. Маркеры, созданные с помощью стилей

См. также

• color
• content
• currentColor
• list-style-type
• quotes
• relative и absolute
• text-fill-color
• Аккордеон меню
• Анимация ссылок при наведении
• Атрибут link
• Атрибуты ссылок
• Декоративные заголовки
• Добавление тени
• Доступность
• Единицы цвета в CSS
• Знакомство с HTML
• Значки в Bootstrap 5
• Игра с картинками
• Использование в вёрстке
• Наследование в CSS
• Не только текст
• Подробнее о позиционировании
• Псевдоэлемент ::before
• Псевдоэлементы
• Псевдоэлементы ::after и ::before
• Работа с кавычками
• Работа с типографикой
• Спойлер
• Что это такое?
• Элементы и

Как изменить маркер списка

Цвет маркера списка можно изменить несколькими способами:

1. Использовать тег span ;
2. Использовать псевдоэлемент ::before или ::after ;
3. Использовать псевдоэлемент ::marker .
4. Изображение для маркера списка.

Как изменить цвет маркера списка с помощью CSS

1. Используя тег span :

li < color:#f16092; >li span

2. Используя псевдоэлемент ::before :

li < color:#214133; list-style-type: none; >li::before

1. Snow
2. Rain
3. Fog

• list-style-type: none; — отменяем стандартный маркер,
• content: » «; — указываем символ маркера, который хотим вывести перед элементом списка.

3. Маркер списка при помощи псевдоэлемента ::marker .

li::marker

Картинка для маркера списка

Чтобы заменить маркеры списка на изображения воспользуемся свойством list-style-image.

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.

Поделиться с друзьями:

Статьи из данной категории:

• JavaScript: Работа с Массивами
• Наличие Динамически Добавленного Элемента
• Стилизация Input File
• Предзагрузка Картинок — Предварительная Загрузка Изображений на JavaScript
• Стилизация Скролла
• События Формы

Оформление списков в CSS

С помощью HTML-тегов можно создать два типа списков, имеющих маркеры: нумерованные и маркированные. По умолчанию большинство браузеров отображает маркеры маркированных списков в виде окружности, а маркеры нумерованных в виде чисел, идущих по порядку. CSS предоставляет возможность изменения внешнего вида стандартных маркеров. Далее будут продемонстрированы примеры с различными видами маркеров, с помощью которых, вы сможете изменить внешний вид своих списков.

Изменение и удаление маркеров

Для изменения стандартного внешнего вида маркера в CSS используется свойство list-style-type, в качестве значения задается тот вид маркера, на который вы хотите заменить стандартный.

Пример, демонстрирующий некоторые виды маркеров для нумерованных списков: