Хочу изменить вид маркера на другой символ. Как это сделать?
Изменить вид маркеров в списке и заменить их на другой символ.
Решение
С помощью 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.
Как вместо символа маркера использовать картинку?
Убрать стандартные маркеры списка и вместо них вывести произвольную картинку.
Решение
Чтобы задать свой рисунок маркера, воспользуйтесь стилевым свойством list-style-image , в качестве значения которого указывается путь к желаемому изображению (рис. 1).
Пример 1. Картинка вместо маркеров
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Учтите, что высота рисунка влияет на межстрочное расстояние между пунктами списка, поэтому подбирайте изображение небольшого размера.
За счёт рисунка можно изменять расстояние между маркером и текстом, а также между пунктами списка. Для этого в картинке закладываются пустые поля, как показано на рис. 2.
Рис. 2. Картинка для создания маркера
Рамка вокруг рисунка приведена для удобства, чтобы показать границы изображения.
Использование свойства list-style-image имеет некоторые недочёты. Во-первых, нельзя смещать рисунок относительно его исходного положения, и во-вторых, в разных браузерах рисунки иногда выводятся с небольшим смещением. Более гибкие настройки имеет свойство background , которое позволяет выводить картинку как фоновый рисунок (пример 2).
Пример 2. Фоновый рисунок
HTML5 CSS 2.1 IE Cr Op Sa Fx
Чтобы текст не накладывался на фоновый рисунок к селектору LI добавлено свойство padding-left , значение которого равно ширине картинки плюс желаемый отступ от рисунка до текста.
CSS. В качестве маркера списка устанавливаем произвольное изображение.
Если свойство CSS list-style-type отвечает за изменение вида маркера списка в пределах стандарных значений, которые встроены в браузеры, но есть также свойство CSS, которое позволяет заменить маркер списка на произвольное изображение.
Это становится возможным благодаря свойству CSS:
list-style-image
Синтаксис здесь следующий:
list-style-image: none | url('путь к файлу') | inherit
В качестве значения этого свойства просто указывается путь к картинке, которая должна стать маркером списка.
Давайте я покажу, как это работает на конкретном примере.
.list1 li
Изображение маркера списка, который вы устанавливаете должно быть соответствующего размера, поэтому его желательно изначально подготовить в графическом редакторе и изменить размеры.
Больше моих уроков по HTML, CSS и верстке сайтов здесь.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Как изменить вид маркера списка?
С помощью CSS допускается устанавливать один из трёх типов маркеров: disc (точка), circle (кружок), square (квадратик). Добавлять эти значения нужно к стилевому свойству list-style-type, которое указывается для селектора ul или li (пример 1).
Пример 1. Стандартные маркеры
В данном примере в качестве маркеров используется квадратик (рис. 1).
Рис. 1. Вид маркеров
Выбор и установка собственного символа маркера происходит через псевдоэлемент ::before. Вначале следует вообще убрать маркеры у списка, присвоив значение none стилевому свойству list-style-type , а затем добавить псевдоэлемент ::before к селектору li . Сам вывод символа осуществляется с помощью свойства content, в качестве значения которого и выступает желаемый символ (пример 2).
Пример 2. Использование ::before и content
В данном примере маркер, установленный по умолчанию, прячется, а взамен добавляется символ (рис. 2).
Рис. 2. Маркеры в виде символа
Чтобы выбрать в качестве маркера какой-нибудь хитрый символ, можно воспользоваться программой Microsoft Word или таблицей символов, это стандартная программа, входящая в комплект Windows. Кодировка кода должна быть обязательно UTF-8.
См. также
- content
- quotes
- relative и absolute
- Аккордеон меню
- Анимация ссылок при наведении
- Атрибуты ссылок
- Добавление тени
- Использование в вёрстке
- Не только текст
- Подробнее о позиционировании
- Псевдоэлемент ::before
- Псевдоэлементы
- Псевдоэлементы ::after и ::before
- Спойлер