Установка маркера списка разными способами. Хочу изменить вид маркера на другой символ

CSS-списки — набор свойств, отвечающих за оформление списков. Использование HTML-списков очень распространено при создании панелей навигации по сайту. Элементы списка представляют набор блочных элементов.

С помощью стандартных CSS-свойств можно изменить внешний вид маркера списка , добавить изображение для маркера , а также изменить местоположение маркера . Высоту блока маркера можно задать свойством line-height .

Оформление списков с помощью CSS-стилей

1. Тип маркера списка list-style-type

Свойство изменяет типа маркера или удаляет маркер для маркированного и нумерованного списков. Наследуется.

Синтаксис

Ul {list-style-type: none;} ul {list-style-type: square;} ol {list-style-type: none;} ol {list-style-type: lower-alpha;} Рис. 1. Пример оформления маркированного и нумерованного списков

2. Изображения для элементов списка list-style-image

В качестве маркера элементов списка можно использовать изображения и градиентые заливки. Наследуется.

Синтаксис

Ul {list-style-image: url("images/romb.png");} ul {list-style-image: linear-gradient(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);}
Рис. 2. Оформление маркированного списка с помощью изображения
Рис. 3. Оформление маркированного списка с помощью градиента

3. Местоположение маркера списка list-style-position

Данное свойство предоставляет возможность располагать маркер вне или внутри содержимого элемента списка. Наследуется.

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

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

Внутрь каждого элемента

создаем конструкцию

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

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

• Скрипка
• Гитара
• Волынка
• Шарманка
• Челеста

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

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

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

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

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

• Скрипка
• Гитара
• Волынка
• Шарманка
• Челеста

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

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

Несмотря на простоту, метод неудобен, особенно при объёмных списках, ведь к каждому пункту списка теперь придётся добавлять тег . Поэтому разберём хитрый способ, полностью основанный на работе CSS.

Смысл в следующем — убираем оригинальные маркеры списка через свойство list-style-type и добавляем свои собственные маркеры с помощью псевдоэлемента :before и свойства content . Такая связка позволяет вставлять любой текст или символ перед элементом, в данном случае LI . Причём видом текста (цвет, шрифт, фон и др.) также можно управлять через стили, что и продемонстрировано в примере 2. Здесь в качестве маркеров используется символ параграфа ¶.

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

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

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

Изменить цвет маркеров в HTML-списке без использования диапазона (6)

Для меня лучшим вариантом является использование псевдоэлементов 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/ (выберите это, для которого не требуются псевдоэлементы, например, треугольники)

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

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

• House
• Garden

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

Если вы можете использовать изображение, вы можете это сделать. И без изображения вы не сможете изменить цвет только пули, а не текст.

Использование изображения

Li { list-style-image: url(images/yourimage.jpg); }

Без использования изображения

Затем вам нужно отредактировать разметку HTML и включить пролет внутри списка и покрасить ли и диапазон с разными цветами.

Мне тоже очень понравился ответ Марка - мне нужен набор разных цветных 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 (этот шестигранный круг казался слишком высоким). Тот, который я использовал, кажется, сидит совершенно посередине. Я также нашел несколько других фигур (квадраты, треугольники, круги и т. Д.)

Мы можем комбинировать 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 которые должны быть установлены на

Кодировки

Построение обоих решений @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

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

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

• House
• Garden

Задача

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

Решение

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