CSS symbols() — власні маркери списку
Опис
автор: Bond
Загальний опис
автор: NagarD
- Порада
-
Перед використанням функції
автор: Bondsymbols(), переконайтеся, що підтримка цієї функції є достатньою у веб-браузерах, які ви плануєте підтримувати. - Порада
-
Правильно визначайте порядок символів у функції
автор: Bondsymbols(), оскільки це впливає на відображення символів для різних рівнів списку. - Порада
-
Експериментуйте з різними символами та їх поєднаннями для створення унікальних та цікавих маркерів списку.
автор: Bond
Синтаксис
symbols(name1 [, name2 [, ...]]);Функція symbols може отримувати єдине значення:
-
<name> -
Імена символів можуть бути рядками або ключовими словами, що відповідають певним символам. Варіанти значень можуть включати ключові слова, такі як
автор: Bonddisc,circle,squareдля використання типових маркерів списку, або власні символи.
| Значення без задання: | none |
|---|
Переглядачі
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 91 | 35 | 77 | 91 |
| Переглядач |  |
 |
 |
|---|---|---|---|
| 91 | 91 | 35 |
Приклади
+ запропонувати свій приклад у пісочниці
При наведенні курсору на елемент списку, маркери змінюються на символи "▷".
HTML
<div id="description">
<h2>Приклад 1: змінюваний список</h2>
<p>При наведенні курсору на елемент списку, маркери змінюються на символи "▷".</p>
</div>
<div id="result">
<ul class="dynamic-list">
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
</div>CSS
#description {
font-style: italic;
text-align: left;
line-height: 1.5;
margin-bottom: 50px;
padding: 12px 16px;
background-color: #f7f7f7;
border: 1px solid #ccc;
}
.dynamic-list {
list-style-type: symbols("▶");
}
.dynamic-list:hover {
list-style-type: symbols("▷");
}Визначення символу для списку за допомогою функції symbols().
HTML
<div id="description">
<h2>Приклад 2: список з різними кольорами маркерів</h2>
<p>Визначення символу для списку за допомогою функції symbols().</p>
</div>
<div id="result">
<ul class="static-list">
<li class="green-marker">Пункт 1</li>
<li class="red-marker">Пункт 2</li>
</ul>
</div>CSS
#description {
font-style: italic;
text-align: left;
line-height: 1.5;
margin-bottom: 50px;
padding: 12px 16px;
background-color: #f7f7f7;
border: 1px solid #ccc;
}
.static-list {
list-style-type: symbols("●");
}
.green-marker {
color: green;
}
.red-marker {
color: red;
}Чотири списки з тими самими двома символами й різними системами — маркери відрізняються з першого погляду: symbolic повторює знак, cyclic крутить по колу, numeric рахує у двійковій системі, fixed після двох пунктів переходить на цифри. П'ятий список — з комами замість пробілів: маркери відкотилися до кружечків.
HTML
<div class="cols">
<section>
<h4>symbols("◆" "◇") — типове symbolic</h4>
<ul class="symbolic">
<li>перший</li><li>другий</li><li>третій</li><li>четвертий</li><li>п'ятий</li>
</ul>
</section>
<section>
<h4>symbols(cyclic "◆" "◇")</h4>
<ul class="cyclic">
<li>перший</li><li>другий</li><li>третій</li><li>четвертий</li><li>п'ятий</li>
</ul>
</section>
<section>
<h4>symbols(numeric "0" "1") — двійковий рахунок</h4>
<ul class="numeric">
<li>перший</li><li>другий</li><li>третій</li><li>четвертий</li><li>п'ятий</li>
</ul>
</section>
<section>
<h4>symbols(fixed "◆" "◇") — далі десяткові</h4>
<ul class="fixed">
<li>перший</li><li>другий</li><li>третій</li><li>четвертий</li><li>п'ятий</li>
</ul>
</section>
<section>
<h4>symbols("◆", "◇") — коми, оголошення відкинуто</h4>
<ul class="broken">
<li>перший</li><li>другий</li><li>третій</li>
</ul>
</section>
<section>
<h4>symbols(cyclic "▶") + ::marker</h4>
<ul class="colored">
<li>перший</li><li>другий</li><li>третій</li>
</ul>
</section>
</div>CSS
.cols {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
section {
width: 230px;
}
h4 {
margin: 0 0 6px;
color: #5a6472;
font: 600 12px/1.35 ui-monospace, monospace;
}
ul {
margin: 0;
padding-left: 42px;
font: 14px/1.6 system-ui, sans-serif;
}
.symbolic { list-style-type: symbols("◆" "◇"); }
.cyclic { list-style-type: symbols(cyclic "◆" "◇"); }
.numeric { list-style-type: symbols(numeric "0" "1"); }
.fixed { list-style-type: symbols(fixed "◆" "◇"); }
.broken { list-style-type: symbols("◆", "◇"); }
.colored { list-style-type: symbols(cyclic "▶"); }
.colored li::marker {
color: #d64545;
font-size: 1.2em;
}Коментарі
Коментарів ще немає — будьте першим!