Как изменить цвет маркеров в списке?
Существует два популярных способа изменения цвета маркеров, чтобы они отличались от цвета текста.
Использование
При этом цвет маркеров определяется стилевым свойством 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
- Использование в вёрстке
- Наследование в CSS
- Не только текст
- Подробнее о позиционировании
- Псевдоэлемент ::before
- Псевдоэлементы
- Псевдоэлементы ::after и ::before
- Работа с типографикой
- Спойлер
- Элементы и
Как сделать, чтобы цвет маркеров в списке отличался от цвета текста?
Задать цвет маркеров в списке не изменяя цвет текста.
Решение
Пример 1. Использование вложенных тегов
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан ниже (рис. 1).
Рис. 1. Маркеры, отличающиеся по цвету от основного текста
Несмотря на простоту, метод неудобен, особенно при объёмных списках, ведь к каждому пункту списка теперь придётся добавлять тег . Поэтому разберём хитрый способ, полностью основанный на работе CSS.
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 8.0+ | 1.0+ | 7.0+ | 3.1+ | 1.0+ | 1.0+ | 1.0+ |
Смысл в следующем — убираем оригинальные маркеры списка через свойство list-style-type и добавляем свои собственные маркеры с помощью псевдоэлемента :before и свойства content . Такая связка позволяет вставлять любой текст или символ перед элементом, в данном случае LI . Причём видом текста (цвет, шрифт, фон и др.) также можно управлять через стили, что и продемонстрировано в примере 2. Здесь в качестве маркеров используется символ параграфа ¶.
Пример 2. Использование псевдоэлемента :before
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 2.
Рис. 2. Маркеры, созданные с помощью стилей
Изменение маркеров в маркированных списках HTML
Как изменить цвет и размер маркера в одном из списков, если их несколько на странице? Как сделать маркер-картинку?
Отслеживать
4,286 14 14 золотых знаков 42 42 серебряных знака 92 92 бронзовых знака
задан 14 сен 2011 в 14:56
1 1 1 серебряный знак 1 1 бронзовый знак
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Отслеживать
ответ дан 14 сен 2011 в 15:00
14.7k 1 1 золотой знак 26 26 серебряных знаков 48 48 бронзовых знаков
Отслеживать
ответ дан 14 сен 2011 в 15:00
2,140 10 10 серебряных знаков 10 10 бронзовых знаков
что бы поменять цвет маркеров одного списка используем «точечный удар» =)
ul /* Все списки зеленые */ ul.one /* - красный */ Маркер картинка — как писал ling link text, но мне больше нравиться так:
Отслеживать
ответ дан 20 сен 2011 в 9:11
416 2 2 серебряных знака 11 11 бронзовых знаков
- html
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как средствами CSS изменить цвет маркера html-списка
Чтобы строки маркированного списка как-то выделить от основного текста, можно сделать так, чтобы цвет маркеров в списке отличался от цвета текста.
По умолчанию стоит черная точка. Если просто задать цвет элементу li, то ничего не получится — цвет будет задан всей строке, а нужно изменить только цвет маркера (ul li цвет точек).
Как изменить цвет буллитов с помощью CSS
- Скрываем оригинальные маркеры списка с помощью свойства list-style-type
- Добавляем свои собственные маркеры с помощью псевдоэлемента :before и свойства content. Это позволит вставить любой текст или символ перед элементом li.
- Внешним видом маркера можно управлять через стили CSS, изменяя цвет, шрифт, фон и другое. Я использовал жирное начертание шрифта Монтсеррат.
li:before < font-family: 'Montserrat', sans-serif; font-weight: 400; color: #d7002e; /* Цвет маркера */ content: "•"; /* Маркер */ padding-right: 7px; /* Отступ от маркера до текста */ >
Если у вас возникла ситуация, когда маркеры появились в ненужных местах, например в главном меню или в дублирующем меню в футере, то это можно легко исправить. Просто допишите родительский элемент, в котором находятся списки, цвет маркеров которых нам надо изменить. Я добавил слово article и теперь эти изменения стали относиться только к контентной области сайта.
article li < list-style-type: none; /* Скрываем маркеры, отображаемые по умолчанию */ >
article li:before < font-family: 'Montserrat', sans-serif; font-weight: 400; color: #d7002e; /* Цвет маркера */ content: "•"; /* Маркер */ padding-right: 7px; /* Отступ от маркера до текста */ >