Вид маркера можно задать через CSS свойство list-style-type
:
Возможны следующие значения:
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; |
|
Цвет стандартного маркера задается через псевдосвойство ::marker
:
<ul class="markers">
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
</ul>
Результат:
Поддержка ::marker в браузерах
Вставка изображения marker.png через свойство list-style-image
:
<ul class="markers">
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
</ul>
.markers {
margin: 0 0 20px 14px;
padding: 0;
}
.markers li {
list-style-image: url(/marker.png);
margin: 7px 0;
}
Результат:
Вставка изображения через свойство background
:
<ul class="markers">
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
</ul>
.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;
}
Результат:
Изображение marker.svg можно вставить через свойство list-style-image
. Размер изменяется с помощью font-size
в псевдосвойстве ::marker
.
<ul class="markers">
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
</ul>
.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;
}
Результат:
Если вставить изображение через свойство background
, размер SVG можно изменить с помощью свойства background-size
.
<ul class="markers">
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
</ul>
.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;
}
Результат:
Вместо маркера можно вставить любой символ, используя свойство list-style-type
:
<ul class="markers">
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
</ul>
.markers {
margin: 0 0 20px 24px;
padding: 0;
list-style-type: "⚡ ";
}
.markers li {
margin: 7px 0;
font-size: 14px;
}
Результат:
Чтобы задать свой символ каждому элементу списка нужно использовать правило@counter-style:
<ul class="markers">
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
</ul>
@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;
}
Например 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>
@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;
}
Результат:
Разные иконки у элементов списка:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<ul class="markers">
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
</ul>
@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;
}