Как изменить li 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
• Работа с кавычками
• Спойлер
• Что это такое?

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

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

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
• Стилизация Скролла
• События Формы

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

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

Решение

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

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

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

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

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

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