Как изменить значок списка в 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
Спойлер

Размер кастомных иконок спиков css

введите сюда описание изображения

Существует некий список, в котором обязательно нужны кастомные иконки, сделал их через list-style-image: url(../img/gearwheel.png); , все работает, но иконки слишком большие, как их уменьшить? Как видите, иконки слишком большие.

Отслеживать
задан 6 июн 2019 в 1:50
user260881 user260881

Эмм. уменьшить в редакторе размер самой картинки? о_О Как вариант, можно добавить background-image: url(. ) на псевдоэлемент li:before — и уже ему задать размеры. или просто

6 июн 2019 в 2:53

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Вариант с before

ul .custom-li .custom-li:before < content: ''; background-image: url('https://gyazo.com/e353b01477115f655a179520e53b7b9c.png'); position: absolute; width: 16px; height: 16px; background-size: 16px 16px; left: -22px; top: 1px; >

(насколько понял, нет вариантов поменять размер картинки в list-style-image )

Отслеживать
ответ дан 6 июн 2019 в 3:04
OPTIMUS PRIME OPTIMUS PRIME
27.1k 3 3 золотых знака 23 23 серебряных знака 48 48 бронзовых знаков
Спасибо, ваш способ полностью рабочий, но был найден чуть лучше вариант — менее громоздкий, спасибо
– user260881
6 июн 2019 в 3:06
И да вы полность правы, размер иконки в list-style-image не изменить
– user260881
6 июн 2019 в 3:07

Решил проблему при помощи использования псевдоэлемента li:before и FontAwesome:

.li-gearwheel:before

Отслеживать
ответ дан 6 июн 2019 в 3:04
user260881 user260881

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как изменить значок списка в css

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

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

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

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

Кликните на значение свойства list-style-type
Наблюдайте за сменой маркеров
Используйте для своих списков наиболее подходящие маркеры

Для маркированных списков существует всего три вида маркеров, которые можно задать с помощью значений circle, disk и squred:

С помощью значения none можно удалить маркеры у пунктов в списке, но отступ слева при этом все равно останется:

Замена маркеров картинками

Если вам не подходит ни один из предлагаемых по умолчанию маркеров, то CSS предоставляет возможность заменить их любой картинкой, в этом вам поможет свойство list-style-image, в значении которого нужно прописать путь к выбранному изображению.

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

Отступ списка

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

Свойство list-style-position указывает, должен ли маркер располагаться внутри или снаружи пунктов списка. Данное свойство может принимать два значения:

outside — маркер располагается слева от содержимого (является значением по умолчанию)
inside — маркер располагается внутри пункта списка вместе с содержимым

Теперь можно переписать предыдущий пример так, чтоб отступ с левой стороны был убран, но маркеры при этом не уезжали за край браузера:

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

Стилизация списков

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

Базовая компьютерная грамотность, основы HTML (изучите Введение в HTML), основы CSS (изучите Введение в CSS), CSS основы по тексту и шрифтам.

Пример простого списка

Для начала, давайте взглянем на пример простого списка. В данной статье мы рассмотрим ненумерованный, нумерованный и описательный списки — все они имеют аналогичные свойства стилизации, но некоторые имеют свои специальные свойства. Не стилизованный пример доступен на Github (проверьте также источник кода.)

HTML для нашего примера списка представлен ниже:

Если вы перейдёте к живому примеру прямо сейчас и изучите элемент списка используя инструменты разработчика браузера, то вы заметите несколько стилей установленных по умолчанию:

Элементы

Объекты списка (элементы
) не имеют заданных значений по умолчанию для интервалов.
Элемент имеет верхний и нижний margin по 16px ( 1em ), но padding не задан.
Элементы имеют margin-left 40px ( 2.5em .)
Элементы
которые мы включили для ссылок (сноски) имеют верхний и нижний margin по 16px ( 1em ), точно так же, как и различные типы списков.

Управление интервалами списков

При оформлении списков, вам необходимо настроить их стили так, чтоб они сохраняли то же вертикальное расстояние, что и окружающие их элементы (такие как параграфы и изображения; иногда называемые вертикальным ритмом) и то же расстояние по горизонтали как и между собой (посмотреть законченный стилизированный пример на Github, а также найти исходный код.)

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

Первое правило устанавливает шрифт сайта и основной размер шрифта 10px. Они наследуются всеми на этой странице.
Правила 2 и 3 задают относительные размеры шрифтов заголовков, различных типов списков (их наследуют дочерние элементы списков) и параграфов. Это значит, что каждый параграф и список будут иметь одинаковый размер шрифта, а также верхний и нижний интервалы, помогая сохранить согласованность вертикального ритма.
Правило 4 задаёт одинаковую высоту line-height в параграфах и пунктах списка — так, что параграфы и каждый отдельный пункт списка будут иметь те же интервалы между строками. Это также поможет сохранить согласованность вертикального ритма.
Правила 5 и 6 применяются к списку описаний — мы задаём одинаковую высоту line-height между терминами и описаниями списке описаний как мы это делали с параграфами и пунктами списка. И снова, согласованность хорошая! Мы также делаем описание терминов жирным шрифтом, чтобы они визуально выделялись легче.

Стили специфичные для списков

: задаёт тип маркеров для использования в списке, например, квадратные или круглые маркеры для неупорядоченного списка, или цифры, буквы или римские цифры для упорядоченного списка. : управляет будет ли маркер появляется внутри пунктов списка или вне их перед началом каждого элемента. : позволяет вам использовать пользовательские изображения в качестве маркеров, а не просто квадрат или круг.

Стили маркеров

Как указано выше, свойство list-style-type (en-US) позволяет вам устанавливать какой тип маркера использовать в качестве точек маркера. В нашем примере мы установили использование заглавных римских цифр в упорядоченном списке:

Это даёт нам следующий вид:

an ordered list with the bullet points set to appear outside the list item text.

Вы можете найти гораздо больше опций, заглянув на справочную страницу list-style-type (en-US).

Позиция маркера

Свойство list-style-position (en-US) устанавливает будет ли появляться маркер внутри пунктов списка или снаружи перед началом каждого пункта. Значение по умолчанию — outside , которое заставляет маркеры находится снаружи пунктов списка, как видно выше.

Если вы установите значение на inside , то маркеры будут находиться внутри строк:

an ordered list with the bullet points set to appear inside the list item text.

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

Свойство list-style-image позволяет вам использовать пользовательское изображение в качестве вашего маркера. Синтаксис довольно прост:

Однако это свойство немного ограничено с точки зрения управления позициями , размерами (и т.д.) маркеров. Вам лучше использовать семейство свойств background , о которых вы узнаете намного больше в модуле Styling boxes . А пока вот вам образец для дегустации!

В нашем законченном примере мы оформили неупорядоченный список следующим образом ( поверх того, что вы уже видели выше ):

Мы сделали следующее:

Установили padding-left элемента

Установили list-style-type (en-US) на none , для того чтобы маркеры не появлялись по умолчанию. Мы собираемся использовать свойства background для управления маркерами.

Вставили маркер в каждый пункт неупорядоченного списка. Соответствующие свойства, следующие:

: Указывает путь к файлу изображения, который вы хотите использовать в качестве маркера. : Определяет где в фоне выбранного элемента появится изображение — в данном случае мы говорим 0 0 , что значит что маркер будет появляться в самом верху слева каждого пункта списка. : Задаёт размер фонового изображения. В идеале мы хотим, чтоб маркеры были того же размера что и пункты списка (или самую малость меньше или крупнее). Мы используем размер 1.6rem ( 16px ), что очень хорошо сочетается с отступом (padding) 20px , который мы позволили разместить внутри маркера — 16px плюс 4px интервала между маркером и текстом пункта списка работают хорошо. : По умолчанию, фоновые изображения повторяются пока не заполнят доступное фоновое пространство. Мы хотим всего лишь одну копию вставленного изображения в каждом случае, поэтому мы установили значение no-repeat .

Это даёт нам следующий результат:

короткая запись list-style

Эти три свойства упомянутые выше могут все быть заданы, используя лишь одну короткую запись свойства, list-style (en-US). Например, следующий CSS:

Может быть заменён этим:

Значения могут быть перечислены в любом порядке, и вы можете использовать одно, два и все три (значения по умолчанию, использованные для свойств, которые не включены — disc , none , и outside ). Если указаны и type и image , тип используется в качестве запасного варианта, если изображение по какой-либо причине не может быть загружено.

Контроль счета списка

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

start

Атрибут start позволит вам начать счёт списка с цифры отличной от 1. Например:

что даст вам такой результат:

reversed

Атрибут reversed начнёт отсчёт по убыванию вместо возрастания. Например:

что даст вам такой результат:

Обратите внимание: Если пунктов в списке в обратном списке больше, чем значение атрибута start , счёт продолжится до нуля и далее отрицательные значения.

value

Атрибут value позволит вам установить специфичные цифровые значения к пунктам списка. Например:

что даст вам такой результат:

Обратите внимание: Даже если вы используете нечисловой list-style-type (en-US), вам всё равно надо использовать эквивалентное цифровое значение в атрибуте value .

Активное изучение: Стилизация вложенного списка

В этой сессии активного изучения, мы хотим, чтобы вы взяли всё что вы выучили выше и попробовали стилизовать вложенный список. Мы предоставили вам HTML и хотим, чтобы вы:

Задали неупорядоченному списку квадратные маркеры.
Задали пунктам неупорядоченного и упорядоченного списка 1,5 межстрочный интервал их размера шрифта.
Задали упорядоченному списку маркеры в виде строчных букв.
Не стесняйтесь играться с примерами списков столько сколько вам нравится, экспериментируя с типами маркеров, интервалами или со всем что вы найдёте.

Если вы допустите ошибку, вы всегда можете сделать сброс используя кнопку Reset. Если вы застрянете, нажмите кнопку Show solution чтобы посмотреть возможный ответ.

Смотрите также

Счётчики CSS предоставляют расширенные инструменты для настройки счета и оформления списков, но они довольно сложные. Мы рекомендуем изучить это, если вы захотите размяться. Смотрите :

Заключение

В плане стилизации списки сравнительно легко освоить, как только вы освоите несколько связанных базовых принципов и специфичные свойства. В следующей статье мы перейдём к методам стилизации ссылок.

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

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

Решение

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

2.9. CSS-списки

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

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

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

Содержание:

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

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

list-style-type
Значения:
disc	Значение по умолчанию. В качестве маркера элементов списка выступает закрашенный кружок.
armenian	Традиционная армянская нумерация.
circle	В качестве маркера выступает незакрашенный кружок.
cjk-ideographic	Идеографическая нумерация.
decimal	1, 2, 3, 4, 5, …
decimal-leading-zero	01, 02, 03, 04, 05, …
georgian	Традиционная грузинская нумерация.
hebrew	Традиционная еврейская нумерация.
hiragana	Японская нумерация: a, i, u, e, o, …
hiragana-iroha	Японская нумерация: i, ro, ha, ni, ho, …
katakana	Японская нумерация: A, I, U, E, O, …
katakana-iroha	Японская нумерация: I, RO, HA, NI, HO, …
lower-alpha	a, b, c, d, e, …
lower-greek	Строчные символы греческого алфавита.
lower-latin	a, b, c, d, e, …
lower-roman	i, ii, iii, iv, v, …
none	Маркер отсутствует.
square	В качестве маркера выступает закрашенный или незакрашенный квадрат.
upper-alpha	A, B, C, D, E, …
upper-latin	A, B, C, D, E, …
upper-roman	I, II, III, IV, V, …
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

ul_ol

Рис. 1. Пример оформления маркированного и нумерованного списков

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

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

list-style-image
Значения:
url(url)	Путь к изображению.
none	значение по умолчанию, означает отсутствие изображения. Также убирает изображение для элемента из группы элементов с установленным изображением-маркером.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

ul_image Рис. 2. Оформление маркированного списка с помощью изображения css-list-style-image Рис. 3. Оформление маркированного списка с помощью градиента

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

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

list-style-position
Значения:
outside	Значение по умолчанию. Маркер располагается вне блока с текстом.
inside	Маркер списка изображается в одном блоке с текстом. Последующие строки текста будут располагаться под значком маркера, т.е. маркер будет обтекаться текстом.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

list_position

Рис. 4. Пример расположения маркера внутри и снаружи блока списка

4. Краткая форма задания стилей списка

Можно объединить все три свойства форматирования списка в одно с помощью list-style . Значения свойств могут быть расположены в произвольном порядке, а часть значений может быть опущена. Если присутствует одно значение, то другие свойства примут значения браузера по умолчанию.

Похожие публикации:

Как подключить наушники mi true wireless earbuds basic 2 к ноутбуку
Как подключить шрифт к сайту css google fonts
Как подчеркнуть текст в html css
Как пользоваться макетной платой arduino

Изменить маркер списка css: Как убрать или изменить маркер списка в CSS

CSS-свойство list-style-image устанавливает изображение, используемое в качестве маркера списка.

Чаще, удобнее использовать общее свойство list-style (en-US).

 list-style-image: none; list-style-image: url('starsolid.gif'); list-style-image: inherit; list-style-image: initial; list-style-image: unset;

Значения

Расположение элемента для использования в качестве маркера. none Указывает, что изображение не используется в качестве маркера списка. Если установлено это значение, вместо него будет использоваться маркер, определённый в list-style-type (en-US).

Формальный синтаксис

 (en-US) | (en-US) noneгде 
 = | (en-US) | (en-US) | (en-US) | (en-US) | (en-US) | (en-US)
 где 
 = image( ? (en-US) [ (en-US) ? (en-US) , ? (en-US) ] (en-US)! (en-US) )
 = image-set( # (en-US) )
 = element( )
 = paint( (en-US), ? (en-US) )
 = cross-fade( , ? (en-US) )
 = | (en-US) | (en-US) | (en-US) | (en-US)
 где 
 = ltr | (en-US) rtl
 = | (en-US) (en-US)
 = | (en-US) | (en-US) | (en-US) | (en-US) | (en-US) | (en-US) currentcolor | (en-US) 
 = [ (en-US) (en-US) | (en-US) (en-US) ] (en-US) (en-US)
 = 
 = ? (en-US) && (en-US) (en-US)
 = (en-US) | (en-US) 
 = linear-gradient( [ (en-US) | (en-US) to ] (en-US)? (en-US) , )
 = repeating-linear-gradient( [ (en-US) | (en-US) to ] (en-US)? (en-US) , )
 = radial-gradient( [ (en-US) || (en-US) ] (en-US)? (en-US) [ (en-US) at (en-US) ] (en-US)? (en-US) , )
 = repeating-radial-gradient( [ (en-US) || (en-US) ] (en-US)? (en-US) [ (en-US) at (en-US) ] (en-US)? (en-US) , )
 = conic-gradient( [ (en-US) from ] (en-US)? (en-US) [ (en-US) at (en-US) ] (en-US)? (en-US), )
где 
 = rgb(  < (en-US)3>(en-US) [ (en-US) / ] (en-US)? (en-US) ) | (en-US) rgb(  < (en-US)3>(en-US) [ (en-US) / ] (en-US)? (en-US) ) | (en-US) rgb( # (en-US) < (en-US)3>(en-US) , ? (en-US) ) | (en-US) rgb( # (en-US) < (en-US)3>(en-US) , ? (en-US) )
 = rgba(  < (en-US)3>(en-US) [ (en-US) / ] (en-US)? (en-US) ) | (en-US) rgba(  < (en-US)3>(en-US) [ (en-US) / ] (en-US)? (en-US) ) | (en-US) rgba( # (en-US) < (en-US)3>(en-US) , ? (en-US) ) | (en-US) rgba( # (en-US) < (en-US)3>(en-US) , ? (en-US) )
 = hsl(   [ (en-US) / ] (en-US)? (en-US) ) | (en-US) hsl( , , , ? (en-US) )
 = hsla(   [ (en-US) / ] (en-US)? (en-US) ) | (en-US) hsla( , , , ? (en-US) )
 = [ (en-US) left | (en-US) right ] (en-US) || (en-US) [ (en-US) top | (en-US) bottom ] (en-US)
 = [ (en-US) [ (en-US), ] (en-US)? (en-US) ] (en-US)# (en-US) , 
 = circle | (en-US) ellipse
 = closest-side | (en-US) farthest-side | (en-US) closest-corner | (en-US) farthest-corner | (en-US) | (en-US)  < (en-US)2>(en-US)
 = [ (en-US) [ (en-US) left | (en-US) center | (en-US) right ] (en-US) || (en-US) [ (en-US) top | (en-US) center | (en-US) bottom ] (en-US) | (en-US) [ (en-US) left | (en-US) center | (en-US) right | (en-US) ] (en-US) [ (en-US) top | (en-US) center | (en-US) bottom | (en-US) ] (en-US)? (en-US) | (en-US) [ (en-US) [ (en-US) left | (en-US) right ] (en-US) ] (en-US) && (en-US) [ (en-US) [ (en-US) top | (en-US) bottom ] (en-US) ] (en-US) ] (en-US)
 = [ (en-US) [ (en-US), ] (en-US)? (en-US) ] (en-US)# (en-US) ,
 где 
 = | (en-US) 
 = | (en-US) 
 = ? (en-US)
 = 
 = | (en-US) 
 = && (en-US) ? (en-US)
 =
 где 
 =  < (en-US)1,2>(en-US)
 =  < (en-US)1,2>(en-US)
 = | (en-US)


HTML
CSS
Результат
BCD tables only load in the browser
Как изменить вид маркера списка?
С помощью 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.
html — Изменить маркеры UL LI только в тексте — WordPress — CSS
Я хотел изменить стиль маркеров в тексте на постах и страницах, поэтому я сделал это с помощью следующего стиля CSS:
/* Remove the old bullet points */ ul li < list-style: none; >/* Now replace with the new one */ ul li::before
Это работает, но теперь он сошел с ума и добавил точку маркера перед каждым тегом ul li на странице.
Я знаю, что могу исключить идентификаторы и классы из этого, как ul:not(.class) li:not(.class)::before

Но мое исключение из списка сейчас растет, и я, скорее всего, все равно буду где-то скучать.
Так есть ли другой способ сделать это?
Я знаю, что мог бы вручную добавить класс в теги ul li , где я хочу новые маркеры, но я пытаюсь избежать этого вручную.
Я в основном хочу изменить стиль маркера по умолчанию, но только для маркеров, содержащихся в сообщениях и страницах.
Есть другой способ сделать это?
Joe Bloggs 18 Май 2019 в 05:35
2 ответа
Судя по тому, как вам кажется, было бы неплохо иметь класс, охватывающий области вашего сайта, где вы хотите, чтобы это изменение произошло. Например:
.post ul li < list-style: none; >.post ul li::before
Вы можете связать разные классы вместе следующим образом:
.  post ul li, .page ul li < list-style: none; >.post ul li::before, .page ul li::before
Или, возможно, создайте правило, специально предназначенное для списков, которые вы хотите изменить.
JAK 18 Май 2019 в 02:49
введите описание изображения здесь WordPress поддерживает создание упорядоченных (пронумерованных) и неупорядоченных (маркированных) списков в сообщениях и страницах. Стандартный редактор пост / страниц облегчает создание списков — просто введите содержимое списка (одна запись в строке), затем выделите записи и нажмите соответствующую кнопку, чтобы отформатировать список.
khushboo 18 Май 2019 в 05:45
Списки — Основы вёрстки контента

Списки являются одной из основных форм представления контента на странице. Они позволяют группировать связанные между собой фрагменты, объединяя их по смыслу. В HTML представлены три вида списков:

Маркированные;
Нумерованные;
Списки определений.

В предложении выше виды списков были сгруппированы с помощью маркированного списка. Он имеет небольшой отступ слева и обозначается маркером у каждого отдельного пункта. Каждый вид списка имеет такие черты, что позволяет быстро определить их на странице.
Помимо этого все списки имеют контейнеры — теги, внутри которых располагается информация. Эти контейнеры помогают странице определить, в каком месте начинается список и где он заканчивается.
В своём представлении каждый элемент списка является блочным элементом. Это означает, что он будет занимать всю доступную ему ширину и каждый новый элемент будет начинаться с новой строки.
Маркированные списки

Маркированный список — популярный инструмент для группировки фрагментов. Его преимущество состоит в отсутствии порядка, в котором размещаются элементы. Таким образом не вводится шкала «важнее — неважно» или «шаг 1 — шаг 2». Вы просто перечисляете контент, который пользователь должен увидеть.
Как и другие списки, создание маркированного списка начинается с указания контейнера. В роли контейнера выступает тег . Каждый элемент вкладывается внутрь этого контейнера и вкладывается в тег . Так браузер отделяет списки друг от друга.
Представим список из начала урока в виде HTML разметки. Для этого указывается контейнер и три тега . Внутри каждого из этих тегов помещается один пункт списка.

Маркированные;
Нумерованные;
Списки определений.


Списки в HTML возможно вкладывать друг в друга. Это позволяет глубже структурировать информацию. Для создания вложенного списка новый контейнер вкладывается внутрь тега . Как вы увидите, списки можно комбинировать. Маркированные вкладывать внутрь нумерованных. Нумерованные внутрь маркированных. В общем виде вложенность может быть описана так:

Параграфы
Списки

Маркированные;
Нумерованные;
Списки определений.

У вложенного списка изменился маркер. Это позволяет даже при отсутствии отступов отделить вложенные списки от основного уровня. CSS позволяет управлять маркерами и настраивать их внешний вид. В конце урока будет изучено свойство, которое позволяет стилизовать маркеры и даже использовать свои изображения для этого.
Нумерованные списки

Структура нумерованных списков повторяет маркированные списки. Имея свою специальную обёртку возможно вкладывать пункты списка. Семантическое отличие нумерованных списков заключается в последовательности. Такие списки идут строго по порядку и обозначают последовательность какой-либо информации.
Нумерованный список использует контейнер , в качестве пунктов списков используется тег . Примером такого списка может служить список дел на день.

Позавтракать
Оплатить билет на метро
Съездить к бабушке
Лечь спать

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

Позавтракать
Оплатить билет на метро
Съездить к бабушке

Купить цветы
Купить конфеты


Лечь спать

Списки определений

С точки зрения HTML списки определения являются самыми сложными для вёрстки. Они включают в себя больше тегов для разметки и позволяют создавать семантическую структуру вида «термин — определение». Такие списки удобны при составлении словарей или глоссариев.
В качестве контейнера для списков определений используется тег , внутри которого не привычная схема , а система из двух тегов:

— термин;
— определение.

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

Основным способом стилизации списков является изменение маркера, который появляется в левой части пункта списка. В маркированных и нумерованных списках его можно изменить с помощью свойства list-style-type . Оно принимает множество различных значений. Все их вы можете увидеть с помощью веб-инспекторов. Для создания маркера в виде квадрата используется значение square .
Свойство list-style-type позволяет скрыть маркер списка. Это частая практика при создании меню через списки, где нет необходимости в выделении пунктов маркерами. Для скрытия маркера используется значение none .
Изменять маркер можно одним из двух способов:

Установка свойства на контейнер. В этом случае все элементы списка получат тот маркер, который был указан в свойстве.
Установка свойства на элемент списка. Маркер изменится только у одного пункта списка, другие получат маркер по умолчанию.

В качестве примера установим квадратный маркер для маркированного списка, а у второго элемента удалим маркер.
Картинка в качестве маркера списка

Помимо встроенных в браузер значений маркеров списка, CSS даёт возможность устанавливать пользовательские маркеры в виде картинок. Это позволяет сделать уникальную стилизацию списков для проекта, как для всего, так и для отдельных списков.
Чтобы установить маркер в виде своего изображения используется свойство list-style-image , значением которого является ссылка на изображение. Оно указывается внутри url() , например:
.list-image < list-style-image: url('./good.png'); >
Важно: вы не можете контролировать размеры такого маркера. Это значит, что изображение нужно подстраивать по размерам заранее. Для стилизации списков с возможностью изменения размеров маркера используются псевдоэлементы, которые будут изучены в следующих уроках.
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты.
Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?
Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.
Что-то не получается или материал кажется сложным?
Загляните в раздел «Обсуждение»:

задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.

Об обучении на Хекслете
Хочу изменить вид маркера на другой символ. Как это сделать?
Хочу изменить вид маркера на другой символ. Как это сделать?
С помощью HTML или CSS допускается устанавливать один из трех типов маркеров: disc (точка), circle (кружок), square (квадрат). Добавлять эти значения нужно к стилевому параметру list-style-type, который указывается для селектора UL или LI.

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

Псевдоэлемент before не работает в браузере Internet Explorer, поэтому собственные маркеры в нем отображаться не будут.
Чтобы установить в качестве маркера какой-нибудь хитрый символ, можно воспользоваться программой Microsoft Word, выбрав меню Вставка > Символ… После чего откроется окно, как показано на рис. 1.
Рис. 1. Выбор символа в программе Microsoft Word
Код знака, выделенный на рисунке цветом, следует вписать в качестве параметра content, добавив перед ним слэш. Например, для приведенного символа следует указывать content: «\25aa».
Маркировка списка html. Создание списков в HTML. Маркированные списки на основе тэгов UL и LI
 Браузеры по-разному интерпретируют указание вида маркера для отдельного элемента списка. Браузер Netscape изменяет вид маркера для данного и всех последующих, пока не встретится очередное переопределение вида маркера. Браузер Internet Explorer изменяет вид маркера только для данного элемента. 

В качестве маркеров списка можно использовать графические изображения, что широко применяется для создания привлекательных, красиво оформленных HTML-документов. На самом деле такая возможность не предоставляется непосредственно языком HTML, а реализуется несколько искусственно. Это вовсе не означает, что так делать не рекомендуется или предосудительно, а лишь означает, что здесь не будут применяться никакие специальные языковые конструкции HTML.
Чтобы понять идею, необходимо разобраться в механизме реализации списков на HTML-страницах. Оказывается, что тег списка

(как, впрочем, и теги списков других типов, рассматриваемых ниже) выполняет единственную задачу — указывает браузеру, что вся информация, располагаемая после данного тега должна отображаться со сдвигом вправо (отступом) на некоторую величину. Теги
, указывающие на отдельные элементы списка, обеспечивают вывод стандартных маркеров элементов списка. Если же нам требуется построить список с графическими маркерами, то можно вообще обойтись без тегов
. Достаточно будет перед каждым элементом списка вставить желаемое графическое изображение. Единственной задачей, которую нужно при этом решить, будет отделение элементов списка друг от друга. Для этого можно использовать теги абзаца Или принудительного перевода строки 
. Пример реализации списка с графическими маркерами, отображение которого представлено на рис. 2.2, показан ниже: который будет передан только один раз. Размеры файла, содержащего маленькое изображение, также крайне незначительны. ПримечаниеМетоды создания списков с графическими маркерами обсуждаются в свою очередь в главе 8. В языке HTML существует два вида списков: нумерованные и ненумерованные. Их создание практически одинаковое. Даже теги отличаются на один символ. Также можно создавать которые могут включать в себя как нумерованные, так и маркерные. Эти списки можно преобразовывать как угодно. Всё зависит от вашей фантазии. Сначала мы рассмотрим стандартные списки, такие же как в редакторе Word, а затем будем их улучшать и оформлять до неузнаваемости.
Нумерованный список HTML
Простые списки выглядят вот так

Согласно стандартам, каждый пункт списка должен быть внутри открывающего и закрывающего тега li. Но если вы не поставите закрывающий тег, то результат будет точно таким же. Обработчик весьма умный. Во время преобразования списка он анализирует открывающие теги. Если он видит новый
Таким образом, списки можно делать так, как показано ниже.
Но с точки зрения профессионалов это некорректно.
Ненумерованные (или же маркерные) списки создаются точно так же, только вместо тега ol, пишется ul.
В нет цифр или букв — только различные символы, которые называются маркерами.
Многоуровневый нумерованный список HTML
Многих пользователей интересует такая возможность. Поэтому следует отметить, что любой нумерованный список HTML можно сделать многоуровневым. Дополнительные уровни могут быть такими же или маркированными.
Для того чтобы создать список, указанный в примере выше, нужно написать следующее.

Обратите внимание, что в этом коде, в отличие от первых примеров, добавлен атрибут type. Благодаря ему можно указать вид сортировки как для нумерованных, так и для маркерных списков.
Для нумерованных указываем алфавит или тип цифр, а для остальных случаев — тип маркера.
Если использовать специальный HTML-тег, нумерованный список может стать любым, каким вы хотите.
Можно указать атрибут type с любым значением из таблицы. Или в классе стиля css указать list-style-type с желаемым типом сортировки.
Перевод значений довольно простой. Хватит базовых знаний английского языка. Но даже если вы не можете перевести слова «круг», «квадрат» и т. п., то можно визуально понять, каков будет результат при указании этих значений в атрибуте type.
Для нумерованных списков нужно использовать следующие варианты:

1 — арабские цифры;
A — заглавные ;
a — строчные латинские буквы;
I — заглавные римские цифры;
i — строчные римские цифры.


По умолчанию всегда используется список с То есть, если вы ничего не указали, это равносильно type=»1″.
Помимо этого, нумерованные списки можно начинать с любой желаемой позиции. По умолчанию — вывод от 1. Но при желании можно начать хоть со ста. Для этого нужно указать атрибут start с любым значением.
Кроме этого, можно сделать вывод в обратном порядке. Для этого нужно написать reversed.
Оформление списков
Нумерованный список HTML можно оформить настолько красиво, что не сразу можно догадаться, что это обычный список, а не картинка, сделанная в Photoshop.
Вот примеры красивых списков.
Как видно из примера, можно изменять внешний вид нумерации и самих элементов.
Создать обычный список можно вот так.
В стилях css нужно указать оформление для тегов ol. Обратите внимание, что в этом случае настройки будут применены ко всем спискам всего сайта, где используется этот файл стилей.

Рассмотрим сначала вариант с круглым оформлением списка. Вернитесь к коду списка. Там указан класс rounded-list. Вот именно с этим классом нужно повозиться, чтобы сделать такую красоту. Назвать класс вы можете как хотите.
Теперь рассмотрим квадратное оформление.
Стили весьма похожи. Разница в том, что в первом случае происходит округление элемента посредством возможностей css.
Профессиональный верстальщик должен предвидеть и понимать, что не все пользователи используют современные компьютеры. Не у всех установлены Windows 7, 8, 10. Существует процент пользователей, кто до сих пор сидит на Windows XP и использует старые версии браузера Internet Explorer.
Как правило, почти все современные дизайнерские улучшения элементов ими не поддерживаются. Пользователю будет казаться, что над дизайном сайта вообще не работали. Что всё съехало. Элементы наезжают друг на друга. Чтобы этого избежать, нужно просчитывать все варианты.

Некоторые веб-мастера закрывают глаза на них, поскольку их доля на современном рынке становится всё меньше и меньше. Но для профессионала важен каждый посетитель, особенно если это коммерческий сайт.
Делайте что-то подходящее для всех или учитывайте все варианты браузеров.
В HTML за организацию списков отвечает целый набор тегов , организация которых должна соответствовать определенным правилам структуризации данных.
Стандартом пятой версии html поддерживается 3 вида списков: нумерованные списки, маркированные списки и списки определений . Также предоставляется возможность вкладывать списки друг в друга, создавая вложенные многоуровневые списки .
Нумерованный список
Нумерованный список — это набор элементов (пунктов списка), имеющих определённую последовательность. Каждый пункт нумерованного списка имеет уникальный маркер, указывающий на порядок следования данного пункта относительно других пунктов списка. По умолчанию маркерами пунктов нумерованного списка являются числа. Первый пункт идёт под числом 1, второй под числом 2 и так далее.

Самыми распространёнными примерами нумерованных списков являются рецепты приготовления различных блюд. Так как любой рецепт — это нумерованный список, с чёткой последовательностью действий.
Для создания нумерованных списков в HTML используется тег
НОУ ИНТУИТ | Лекция | Списки и изображения в HTML
Аннотация: В лекции рассматриваются особенности работы со списками и изображениями в HTML.
Списки в HTML
Списком называется взаимосвязанный набор данных, которые начинаются с маркера или цифры. Списки используются для систематизации разных данных и представления их в наглядном и удобном для пользователя виде.
В HTML используется три типа списков:

маркированный (или неупорядоченный) список,
нумерованный (или упорядоченный) список,
список определений.


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

Нарезать картошку.
Посолить.
Поставить аквариум на огонь.

Список определений используется для вывода пар термин-определение, объединяя определенные объекты и их определения в списке. Например, следующий список определений используется для связи расширений файла и программ, с помощью которых данные файлы создаются:
*.doc файлы, созданные Microsoft Word *.xls файлы, созданные Microsoft Excel *.ppt файлы, созданные Microsoft PowerPoint
intuit.ru/2010/edi»>Списки могут вкладываться друг в друга, причем допускается вложение списков одного типа в списки другого типа. Следующий рецепт приготовления ухи демонстрирует список определений, в который вложены маркированный и нумерованный списки:

рыбка,
картошка,
соль по вкусу.


Нарезать картошку
Посолить.
Поставить аквариум на огонь.

Маркированный список

Маркированный список определяется с помощью элемента UL. Каждый элемент списка должен начинаться с элемента LI и быть вложенным в элемент UL. Если к элементу UL применяется свойства CSS, то элементы LI наследуют эти свойства. Приведенный выше маркированный список выглядит на языке HTML следующим образом:

маркированный (или неупорядоченный) список,
нумерованный (или упорядоченный) список,
список определений.

Маркированные списки могут выводиться с использованием одного из трех видов маркеров: закрашенного кружка (по умолчанию), не закрашенного кружка и закрашенного квадрата. Вид маркера можно изменить с помощью атрибута type, установив его значение disk, circle и square соответственно. Однако этот атрибут не рекомендуется Спецификацией HTML 4.01. Изменить маркер на один из нескольких используемых по умолчанию стилей, использовать свое собственное изображение или даже вывести список без маркеров можно с помощью соответствующих свойств CSS list-style или list-style-type.
Нумерованный список
intuit.ru/2010/edi»>Нумерованный список устанавливается с помощью элемента OL. Каждый элемент списка должен начинаться с элемента LI, как и в случае маркированного списка. Если к элементу OL применяется свойства CSS, то элементы LI наследуют эти свойства. Приведенный выше нумерованный список выглядит на языке HTML следующим образом:

Нарезать картошку.
Посолить.
Поставить аквариум на огонь.


Нумерованные списки могут выводиться с помощью одной из нескольких цифровых или алфавитных систем. По умолчанию, в большинстве браузеров используются десятичные числа, но имеется большее количество возможностей, например, заглавные и строчные латинские буквы, заглавные и строчные римские цифры и многое другое. Выбор маркера и в данном случае осуществляется с помощью параметра type элемента OL. Однако, как было отмечено выше, данный параметр является не рекомендуемым, а для осуществления аналогичной функциональности рекомендуется использовать свойства CSS list-style или list-style-type.
Начинать список допускается с любого номера. Для этой цели применяется атрибут start элемента OL или атрибут value элемента LI. В качестве значения атрибутов start и value задается любое целое положительное число. При этом неважно, какой тип нумерации установлен, даже если в качестве списка используются латинские буквы. Если одновременно для списка применяются атрибуты start и value, то последний имеет преимущество, и нумерация отображается с числа (или символа), указанного аргументом value. Следуем отметить, что эти атрибуты являются фактически исключенными в Спецификации HTML 4.01. Это может показаться странным, так как эти атрибуты имеют смысл и не имеют эквивалента в CSS. Поэтому, использовать данные атрибуты или нет, решает только разработчик.
Список определений

Для создания списка определений используются три элемента: DL, DT и DD. Каждый такой список начинается с контейнера DL, куда входит элемент DT, создающий термин, и элемент DD, задающий определение этого термина. Закрывающий тег не обязателен, поскольку следующий тег сообщает о завершении предыдущего элемента. Тем не менее, хорошим стилем является закрывать все теги. Приведенный выше список определений может быть реализован следующим образом:
 *.doc
 файлы, созданные Microsoft Word
 *.xls
 файлы, созданные Microsoft Excel
 *.ppt
 файлы, созданные Microsoft PowerPoint
 
Стандарт не исключает возможности давать несколько определений одного термина или одно определение нескольким терминам, как показано в следующих примерах:
кофе напиток, приготовленный из кофейных зерен один из оттенков цвета коричневого цвета Кока-Кола Фанта Колокольчик Сладкий, насыщенный углекислым газом напиток

Обычно не принято связывать несколько терминов с одним определением, но полезно знать, что это возможно, если возникнет такая необходимость.
с CSS :: marker
Before :: marker, если вы хотели настроить внешний вид элементов списка, можно было изменить свойство list-style-type, чтобы выбрать новый маркер из списка параметров. в то время как цвет маркера был связан с цветом текста. Вы можете изменить диск на квадрат, круг или на разные буквы.
Вы также можете использовать list-style-image и предоставить URL-адрес изображения для замены вашего маркера.
Если вы хотите изменить цвет маркера и сделать его уникальным по цвету текста, тогда все усложнилось:
Старый способ изменить цвет маркера
 ul.old-color-change < тип-стиль-список: нет; >ul.old-color-change li :: before

Это включало удаление исходного маркера, добавление селектора псевдокласса :: before, чтобы добавить его обратно в наш маркер с использованием юникода маркера и дополнительных стилей для цвета, размера и положения маркера.
Изменение цвета маркера
С новым псевдоэлементом :: marker изменить цвет маркера так же просто, как:
 ul.color-change li :: marker
Изменение содержимого маркера
Обычно вместо маркера требуется использовать значок из Font Awesome. Вы можете добиться этого с помощью new :: marker следующим образом:
 ul.marker-content-change li < отступ слева: 0,5 м; >ul.marker-content-change li :: marker
Изменение содержимого маркера, скорее всего, потребует добавления некоторого пространства между маркером и текстом элемента списка.Этого можно добиться, добавив некоторые отступы к вашему элементу списка, как указано выше.
Изменение содержимого маркера при наведении курсора
Вы также можете комбинировать псевдокласс: hover с :: marker, чтобы по-разному отображать ваш маркер при наведении курсора на элемент списка:
 ul.  hover-marker-content-change li < отступ слева: 0,5 м; >ul.hover-marker-content-change li :: marker < семейство шрифтов: «Font Awesome 5 Free»; font-weight: 900; содержимое: '\ f35a'; цвет: коралловый; >ул.hover-marker-content-change li: hover :: marker
В приведенном выше примере сплошная или обведенная стрелка устанавливается через свойство font-weight. Изменение веса шрифта маркера при наведении курсора на элемент списка изменяет значок.
Новый псевдоэлемент :: marker позволяет изменять внешний вид маркера более быстро и последовательно, чем когда-либо прежде, делая списки уникальными для вашего бренда.
Примечание. Хотя :: marker поддерживается во всех современных браузерах, включая Edge, Firefox, Chrome, Safari и Opera, он не поддерживается в Internet Explorer 11.
Узнайте больше о псевдоэлементе :: marker в веб-документации MDN.
Пользовательские стили списков с использованием :: marker | автор: Mateusz Hadryś
Научитесь стилизовать маркеры списков с помощью нового псевдоэлемента :: marker

Списки не должны быть скучными.
А с новым псевдоэлементом :: marker делать их интересными тоже не должно быть болезненно. Поддержка этого псевдоэлемента браузером раньше была нечеткой, но с добавлением в Chrome 86 она скоро станет универсальной.
Я покажу вам, как сделать ваши списки заметными.
 Мы собираемся охватить: 

Встроенные стили списков
Изменение цвета маркеров списка
Маркировки списка эмодзи
Счетчики CSS
Маркер нестандартных изображений
Полностью настраиваемые маркеры списка с использованием : : before

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

Псевдоэлемент :: marker позволяет нам изменить стиль маркера списка (маркер / номер). используя подмножество свойств CSS. Допустимые свойства:

Все свойства шрифта (размер шрифта, семейство шрифтов и т. Д.)
цвет
анимация и переход свойства
направление , текст-комбинировать- вертикальный , unicode-bidi
и контент

Давайте посмотрим, что он умеет.
�� Изменение цвета
Самый простой способ улучшить внешний вид списков — это изменить цвет маркеров списка. Мы можем сделать это так же, как и изменить цвет обычного текста. Код
Что делать, если вам нужна поддержка старых браузеров? Вы можете применить цвет к li и обернуть текст внутри него в другом элементе. Например:
Или создайте полностью настраиваемый маркер с :: до .Подробнее об этом позже.
Пользовательский текст
Вы можете подумать: Хорошо, но меняет цвет все, что может сделать :: marker ? 

Нет. Вовсе нет. Это позволяет нам изменять содержимое маркера списка, используя метко названное свойство content . Код
Вы можете использовать любой текст в качестве содержимого , включая символы Unicode, подобные приведенным выше, или даже смайлики…
�� Emoji Bullets
Как я сказал выше, вы можете использовать смайлики в качестве маркеров списка.
Но вы, вероятно, не захотите использовать одни и те же смайлики для каждого элемента списка. Чтобы исправить это, мы можем установить наши смайлики в атрибуте data- * в HTML.
И получить их в CSS с помощью функции attr () .
Мы даже можем изменить содержимое маркера при наведении курсора, используя псевдокласс : hover .
И вот результат.
Хорошо, а как насчет упорядоченных списков? Можем ли мы вот так изменить содержание их маркеров?
Пользовательские упорядоченные списки

Чтобы изменить содержимое маркера упорядоченного списка, нам нужно знать, к какому элементу он принадлежит. Нам нужно знать его позицию в списке. Вот тут и пригодятся счетчики CSS.
Нам нужно создать счетчик в списке и увеличивать его для каждого элемента списка. Затем получите текущее значение счетчика с помощью CSS-функции counter () . Мы используем результат этой функции как значение свойства content .
Давайте рассмотрим код, чтобы понять, что происходит.
Мы используем counter-reset для создания нового счетчика с именем list .Название произвольное и полностью зависит от вас. Но почему свойство называется counter- reset ? Потому что счетчик на самом деле глобальный, и нам нужно сбрасывать его значение в каждом списке. Вот почему мы должны установить его на и , а не на элементы списка.
Мы создали счетчик, но он бесполезен, если его значение никогда не меняется. Нам нужно увеличивать его для каждого элемента списка. Для этого мы устанавливаем counter-increment: list; на наших
. Теперь, когда у нас есть автоматически увеличивающееся значение, мы используем его в свойстве content нашего маркера.И вот здесь происходит волшебство. Мы можем комбинировать значение нашего счетчика с другими строками, при желании разделенными пробелами. Несколько примечаний:

В этом примере я импортировал некоторые шрифты из Google Fonts. В этом нет необходимости, но я использую его, чтобы различать содержание элемента списка и маркер.
Поскольку содержание маркера в примере стало довольно длинным, в некоторых случаях он мог исчезнуть с экрана. Вот почему я использовал list-style-position: inside; , чтобы переместить маркер внутри поля элемента списка.
Вы можете поставить число после имени счетчика, чтобы начать с другого значения. Это будет выглядеть примерно так: counter-reset: list 5; и первые три элемента этого списка будут иметь номера 6, 7 и 8.
Счетчики могут использоваться для любого элемента html, а не только для списков.

Пользовательские маркеры изображений
Хорошо, мы можем изменить цвет, стиль и текстовое содержимое маркеров списка, но что, если нам нужно что-то полностью индивидуальное? Придется использовать изображения.
Для этого мы устанавливаем изображение в качестве содержимого маркера с помощью функции url () CSS. Код
Упорядоченный и неупорядоченный список HTML. Маркерные типы списков
В HTML несколько элементов отвечают за создание списков, конструкции которых должны соответствовать определенным правилам структурирования данных.
Стандарт пятой версии HTML поддерживает три типа списков: упорядоченные списки, неупорядоченные списки и списки определений.Вы также можете создавать вложенные списки, т. Е. Вкладывать списки друг в друга.
Заказанный список

Упорядоченный список — это набор элементов (элементов списка), имеющих определенную последовательность. Каждый элемент в упорядоченном списке имеет уникальный маркер, указывающий порядок элемента относительно других элементов в списке. По умолчанию числа являются маркерами элементов упорядоченного списка. Первый элемент — это цифра 1, второй — номер 2 и так далее.
Самыми распространенными примерами упорядоченных списков являются рецепты приготовления различных блюд.Поскольку любой рецепт представляет собой упорядоченный список с четкой последовательностью действий.

(упорядоченный список), внутри которого находятся его элементы с данными, за которые отвечает специальный тег

   : Заголовок страницы

Читать:
как сканировать на виндовс 10