Стили маркированного и нумерованного списка на CSS
Как изменить вид маркера списка? С помощью CSS допускается устанавливать один из трёх типов маркеров: disc (точка), circle (кружок), square (квадратик). Добавлять эти значения нужно к стилевому свойству list-style-type, которое указывается для селектора ul или li ul { list-style-type: square; /* Квадратные маркеры */ } Использование псевдоэлемента ::before Выбор и установка собственного символа маркера происходит через псевдоэлемент ::before. Вначале следует вообще убрать маркеры у списка, присвоив значение none стилевому свойству list-style-type, а затем добавить псевдоэлемент ::before к селектору li. Сам вывод символа осуществляется с помощью свойства content, в качестве значения которого и выступает желаемый символ li { list-style-type: none; /* Убираем маркеры у списка */ } li::before { content: "►"; /* Маркер списка */ padding-right: 0.5em; /* Расстояние от маркера до текста */ } Использование псевдоэлемента ::marker Псевдоэлемент ::marker позволяет управлять настройками маркера списка и работает схожим с ::before образом. При этом убирать исходные маркеры, как это делалось в предыдущем примере, необходимости нет. Для ::marker не работают свойства margin и padding, поэтому для изменения расстояния от маркера до текста свойство padding-left добавляется к селектору li li { padding-left: 0.5em; /* Расстояние от маркера до текста */ } li::marker { content: "►"; /* Маркер списка */ } Подробнее
CSS основные команды.
CSS (Cascading Style Sheets) - это язык стилей, который используется для описания внешнего вида HTML-документа. Он определяет, как элементы HTML должны отображаться на экране, при печати или на других носителях. CSS-правило состоит из селектора и блока объявлений. Блок объявлений заключается в фигурные скобки {} и содержит одно или несколько объявлений, разделенных точкой с запятой ;. Каждое объявление состоит из свойства и значения, разделенных двоеточием :. selector { property: value; property: value; ...