CSS-стили для маркированных списков

1

Вид маркера можно задать через CSS свойство list-style-type:

<ul>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
</ul>
HTML
ul {
	list-style-type: disc;
}
CSS

Возможны следующие значения:

list-style-type: disc;
  • Элемент списка
  • Элемент списка
list-style-type: circle;
  • Элемент списка
  • Элемент списка
list-style-type: armenian;
  • Элемент списка
  • Элемент списка
list-style-type: cjk-ideographic;
  • Элемент списка
  • Элемент списка
list-style-type: decimal;
  • Элемент списка
  • Элемент списка
list-style-type: decimal-leading-zero;
  • Элемент списка
  • Элемент списка
list-style-type: georgian;
  • Элемент списка
  • Элемент списка
list-style-type: hebrew;
  • Элемент списка
  • Элемент списка
list-style-type: hiragana;
  • Элемент списка
  • Элемент списка
list-style-type: hiragana-iroha;
  • Элемент списка
  • Элемент списка
list-style-type: katakana;
  • Элемент списка
  • Элемент списка
list-style-type: katakana-iroha;
  • Элемент списка
  • Элемент списка
list-style-type: lower-alpha;
  • Элемент списка
  • Элемент списка
list-style-type: lower-greek;
  • Элемент списка
  • Элемент списка
list-style-type: lower-latin;
  • Элемент списка
  • Элемент списка
list-style-type: lower-roman;
  • Элемент списка
  • Элемент списка
list-style-type: square;
  • Элемент списка
  • Элемент списка
list-style-type: upper-alpha;
  • Элемент списка
  • Элемент списка
list-style-type: upper-latin;
  • Элемент списка
  • Элемент списка
list-style-type: upper-roman;
  • Элемент списка
  • Элемент списка
list-style-type: none;
  • Элемент списка
  • Элемент списка
2

Цвет стандартного маркера задается через псевдосвойство ::marker:

<ul class="markers">
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
</ul>
HTML
.markers li::marker {
	color: red;
	font-size: 18px;
}
CSS

Результат:

Поддержка ::marker в браузерах

3

Вставка изображения marker.png через свойство list-style-image:

<ul class="markers">
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
</ul>
HTML
.markers {
	margin: 0 0 20px 14px;
	padding: 0;
}
.markers li {
	list-style-image: url(/marker.png);
	margin: 7px 0;
}
CSS

Результат:

Вставка изображения через свойство background:

<ul class="markers">
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
</ul>
HTML
.markers {
	margin: 0 0 20px 0;
	padding: 0;
}
.markers li {
	display: block;
	margin: 7px 0;
	background: url(/marker.png) 0 4px no-repeat;
	padding-left: 15px;
	font-size: 14px;
}
CSS

Результат:

4

Изображение marker.svg можно вставить через свойство list-style-image. Размер изменяется с помощью font-size в псевдосвойстве ::marker.

<ul class="markers">
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
</ul>
HTML
.markers {
	margin: 0 0 20px 14px;
	padding: 0;
}
.markers li {
	list-style-image: url(/marker.svg);
	margin: 7px 0;
}
.markers li::marker {
	font-size: 1.1rem;
	line-height: 1;
}
CSS

Результат:

Если вставить изображение через свойство background, размер SVG можно изменить с помощью свойства background-size.

<ul class="markers">
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
</ul>
HTML
.markers {
	margin: 0 0 20px 0;
	padding: 0;
}
.markers li {
	display: block;
	margin: 7px 0;
	background: url(/marker.svg) 0 4px no-repeat;
	background-size: 8px 8px;
	padding-left: 15px;
	font-size: 14px;
}
CSS

Результат:

5

Вместо маркера можно вставить любой символ, используя свойство list-style-type:

<ul class="markers">
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
</ul>
HTML
.markers {
	margin: 0 0 20px 24px;
	padding: 0;
	list-style-type: "⚡ ";
}
.markers li {
	margin: 7px 0;
	font-size: 14px;
}
CSS

Результат:

Чтобы задать свой символ каждому элементу списка нужно использовать правило@counter-style:

<ul class="markers">
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
</ul>
HTML
@charset "UTF-8";
@counter-style marker-emoji {
	system: cyclic;
	symbols: "🍋" "🍎" "🍒";
	suffix: " ";
}
.markers {
	margin: 0 0 20px 24px;
	padding: 0;
	list-style-type: marker-emoji;
}
.markers li {
	margin: 7px 0;
	font-size: 14px;
}
CSS
6

Например Introducing Material Symbols

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<ul class="markers">
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
</ul>
HTML
@charset "UTF-8";
@counter-style marker-font {
	system: cyclic;
	symbols: "arrow_forward";
	suffix: " ";
}
.markers {
	margin: 0 0 20px 24px;
	padding: 0;
	list-style-type: marker-font;
}
.markers li::marker {
	font-family: 'Material Icons';
	color: red;
	line-height: 1;
	font-size: 14px;
}
.markers li {
	margin: 7px 0;
	font-size: 14px;
}
CSS

Результат:

Разные иконки у элементов списка:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<ul class="markers">
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
</ul>
HTML
@charset "UTF-8";
@counter-style marker-emoji {
	system: cyclic;
	symbols: "arrow_forward" "add" "star_rate";
	suffix: " ";
}
.markers {
	margin: 0 0 20px 24px;
	padding: 0;
	list-style-type: marker-emoji;
}
.markers li::marker {
	font-family: 'Material Icons';
	color: red;
	line-height: 1;
	font-size: 14px;
}
.markers li {
	margin: 7px 0;
	font-size: 14px;
}
.markers li:before {
	content: "";
	display: inline-block;
	vertical-align: middle;
}
CSS

Результат:

26.05.2023
29231
Предыдущая запись Подключение шрифтов в CSS
Следующая запись Стилизация Checkbox

Комментарии

, чтобы добавить комментарий.

Другие публикации

Стили для нумерованных списков ol
Несколько примеров как задать стили у нумерации списков с применением счетчика counter и псевдоэлемтов :before и...
45604
+14
CSS-стили для списков dl, dt, dd
Элементы dl, dt, dd предназначенных для создания списка определений. dl – общий контейнер, dt – термин, dd –...
10798
+4
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
45415
+34
Генерация счета на оплату PDF PHP
С помощью расширения dompdf можно легко сформировать PDF файл. По сути, dompdf - это конвертер HTML в PDF который...
68531
+33
Печать HTML страниц
Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге...
63386
+7
Повышение результатов PageSpeed Insights
Сборник советов как поднять оценку в PageSpeed Insights.
15435
+3