Ul цвет маркера. Стилизация номеров строк (цифр) в упорядоченных списках ol. Как изменить цвет буллитов с помощью CSS

Чтобы строки маркированного списка как-то выделить от основного текста, можно сделать так, чтобы цвет маркеров в списке отличался от цвета текста.

По умолчанию стоит черная точка. Если просто задать цвет элементу li, то ничего не получится - цвет будет задан всей строке, а нужно изменить только цвет маркера (ul li цвет точек).

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

1. Скрываем оригинальные маркеры списка с помощью свойства list-style-type
2. Добавляем свои собственные маркеры с помощью псевдоэлемента :before и свойства content . Это позволит вставить любой текст или символ перед элементом li .
3. Внешним видом маркера можно управлять через стили CSS, изменяя цвет, шрифт, фон и другое. Я использовал жирное начертание шрифта Монтсеррат.

li { list-style-type: none; /* Скрываем маркеры, отображаемые по умолчанию */ } 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; /* Отступ от маркера до текста */ }

CSS дает возможность создавать маркированные и нумерованные списки, оформлять списки маркеров изображением, а также, если нужно, вообще убирать любые обозначения маркированного списка.

CSS стили списка маркера.

list-style-type

list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none ;

Значение :

disk – маркированный список в виде закрашенного кружка

circle – маркированный список в виде не закрашенного кружка

square – маркированный список в виде закрашенного квадратика

decimal – нумерованный список арабскими числами (1,2,3 и т.д.)

upper-roman – нумерованный список большими римскими цифрами (I,II,III,IV и т.д.)

lower-roman – нумерованный список маленькими римскими цифрами (i,ii,iii,iv и т.д.)

upper-alpha – нумерованный список заглавными буквами (A,B,C и т.д.)

lower-alpha – нумерованный список строчными буквами (a,b,c и т. д.)

none – без маркера.

Пример :

• Верь в лучшее, ожидай худшее.
• Жизнь - это болезнь, со смертельным исходом.
• Никогда не говори никогда.

Результат :

Бывают такие случаи, когда отображения маркера в списке нужно убрать. Для этого в коде CSS пропишите

list-style-type: none;

Пример :

• Верь в лучшее, ожидай худшее.
• Никогда не говори никогда.

Результат :

Можно обычные маркеры в списке заменить собственными изображениями. Это можно сделать с помощью свойства list-style-image .

list-style-image

list-style-image: url(картинка.png);

Пример :

• Верь в лучшее, ожидай худшее.
• Жизнь - это болезнь со смертельным исходом.
• Никогда не говори никогда.

Результат :

Можно также задать маркированному списку расстояние от текста. Это можно сделать с помощью свойства padding-left для селектора li.

Пример :

• Верь в лучшее, ожидай худшее.
• Жизнь - это болезнь со смертельным исходом.
• Никогда не говори никогда.

Результат :

Следующая задача состоит в том, чтобы изменить цвет маркера, но при этом не изменять цвет текста. Как это возможно сделать? Цвет маркера можно изменить, если к тесту добавить тег .
Это выглядит вот так:

текст

Пример :

• Верь в лучшее, ожидай худшее.
• Жизнь - это болезнь со смертельным исходом.
• Никогда не говори никогда.

Результат :

Дополнение к общей теме.
Если вам нужно, по каким-либо причинам, задать нумерацию списка маркера не с нуля, а, допустим, с 8, вы можете сделать такой ход.

Пример :

• Верь в лучшее, ожидай худшее.Пункт 1
• Жизнь - это болезнь со смертельным исходом.Пункт 2
• Никогда не говори никогда.Пункт 3
• Это все что я знал. Пункт 4

Результат :

Вот и подошла к завершению тема .

Задача

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

Решение

С помощью 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

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

. Причём видом текста (цвет, шрифт, фон и др.) также можно управлять через стили, что и продемонстрировано в примере 2.

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

• Север
• Юг
• Запад
• Восток

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

размер маркера списка css (8)

Мне было интересно, есть ли способ изменить цвет на пули в списке.

У меня есть список:

• House
• Garden

Невозможно вставить что-либо в li, например, «span» и «p». Могу ли я изменить цвет пуль, но не текст каким-то умным способом?

Для меня лучшим вариантом является использование псевдоэлементов CSS, поэтому для disc пули disc это будет выглядеть так:

ul { list-style-type: none; } li { position: relative; } li:before { content: ""; display: block; position: absolute; width: 5px; /* adjust to suit your needs */ height: 5px; /* adjust to suit your needs */ border-radius: 50%; left: -15px; /* adjust to suit your needs */ top: 0.5em; background: #f00; /* adjust to suit your needs */ }

• first
• second
• third

• width и height должны иметь равные значения, чтобы удерживать указатели округлыми
• вы можете установить border-radius равным нулю, если вы хотите иметь square пули

Для более стилей пули вы можете использовать другие css-формы https://css-tricks.com/examples/ShapesOfCSS/ (выберите это, для которого не требуются псевдоэлементы, например, треугольники)

Основываясь на ответе @ ddilsaver. Я хотел иметь возможность использовать спрайт для пули. Это, похоже, работает:

Li { list-style: none; position: relative; } li:before { content:""; display: block; position: absolute; width: 20px; height: 20px; left: -30px; top: 5px; background-image: url(i20.png); background-position: 0px -40px; /* or whatever offset you want */ }

Я знаю, что это действительно, действительно, старый вопрос, но я играл с этим и придумал способ, которого я не видел. Дайте списку цвет, а затем перезапишите цвет текста с помощью::first-line селектора::first-line . Я не эксперт, поэтому, возможно, что-то не так с этим подходом, что мне не хватает, но, похоже, он работает.

li { color: blue; } li::first-line { color: black; }

• House
• Garden

Мне тоже очень понравился ответ Марка - мне нужен набор разных цветных UL, и, очевидно, было бы проще просто использовать класс. Вот что я использовал для апельсина, например:

Ul.orange { list-style: none; padding: 0px; } ul.orange > li:before { content: "\25CF "; font-size: 15px; color: #F00; margin-right: 10px; padding: 0px; line-height: 15px; }

Кроме того, я обнаружил, что шестнадцатеричный код, который я использовал для «content:», был другим, чем у Marc"s (этот шестигранный круг казался слишком высоким). Тот, который я использовал, кажется, сидит совершенно посередине. Я также нашел несколько других фигур (квадраты, треугольники, круги и т. Д.)

Построение обоих решений @Marc и @jessica - это решение, которое я использую:

Li { position:relative; } li:before { content:""; display: block; position: absolute; width: 6px; height:6px; border-radius:6px; left: -20px; top: .5em; background-color: #000; }

Я использую em для размеров шрифта, поэтому, если вы установили top значение в.5em оно всегда будет помещено в середину вашей первой строки текста. Я использовал left:-20px потому что это позиция left:-20px по умолчанию в браузерах: parent padding/2

Исходя из решения @ Marc - поскольку символ пули визуализирован по-разному с разными шрифтами и браузерами, я использовал следующую технику css3 с радиусом границы, чтобы сделать пулю, с которой я больше контролирую:

Li:before { content: ""; background-color: #898989; display: inline-block; position: relative; height: 12px; width: 12px; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; margin-right: 4px; top: 2px; }

Мы можем комбинировать list-style-image с svg s, который мы можем встроить в css ! Этот метод предлагает невероятный контроль над «пулями», которые могут стать чем угодно.

Чтобы получить красный круг, просто используйте следующий css:

"); }

Но это только начало. Это позволяет нам делать любую сумасшедшую вещь, которую мы хотим с этими пулями. круги или прямоугольники легко, но все, что вы можете нарисовать с помощью svg , можете зайти туда! Посмотрите пример яблочного яблока ниже:

ul { list-style-image: url("data:image/svg+xml,"); } ul ul { list-style-image: url("data:image/svg+xml,"); } ul ul ul { list-style-image: url("data:image/svg+xml,"); } ul ul ul ul { list-style-image: url("data:image/svg+xml,"); } ul.bulls-eye { list-style-image: url("data:image/svg+xml,"); } ul.multi-color { list-style-image: url("data:image/svg+xml,"); }

• Big circles!
  • Big rectangles!
  • b
    • Small circles!
    • c
      • Small rectangles!

• Bulls
• eyes.

• Multi
• color

Ширина / высота атрибутов

Для некоторых браузеров требуются атрибуты width и height которые должны быть установлены на

Кодировки

Я справился с этим без добавления разметки, но вместо этого использовал li:before . Это, очевидно, имеет все ограничения:before (без старой поддержки IE), но, похоже, работает с IE8, Firefox и Chrome после очень ограниченного тестирования. Стиль пули также ограничен тем, что находится в юникоде.

li { list-style: none; } li:before { /* For a round bullet */ content: "\2022"; /* For a square bullet */ /*content:"\25A0";*/ display: block; position: relative; max-width: 0; max-height: 0; left: -10px; top: 0; color: green; font-size: 20px; }