За допомогою CSS можна встановлювати один з трьох типів маркерів: disc (крапка), circle (кружок), square (квадратик). Додавати ці значення потрібно до стильової властивості list-style-type, яка вказується для селектора ul або li (приклад 1).
Приклад 1. Стандартні маркери
<!DOCTYPE html> ;
<html>
<head>
<meta charset="utf-8">
<title>Квадратні маркери</title> <style> ul { list-style-type: square; /* Квадратні маркери */
}
</style>
</head>
<body> <ul> <li>Чебурашка</li> <li>Крокодил Гена</li> <li>Шапокляк</li>
</ul>
</body>
</html>У цьому прикладі як маркер використовується квадратик (рис. 1).
Мал. 1. Вигляд маркерів
Вибір та встановлення власного символу маркера відбувається через псевдоелемент ::before. Спочатку слід взагалі прибрати маркери у списку, надавши значення none стильової властивості list-style-type, а потім додати псевдоелемент ::before до селектора li. Саме виведення символу здійснюється за допомогою властивості content, як значення якого і виступає бажаний символ (приклад 2).
Приклад 2. Використання ::before та content
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Символ як маркер</title> <style> li { list-style-type: none; /* Забираємо маркери у списку */
}
li::before { content: "►"; /* Маркер списку */
padding-right: 0.5em; /* Відстань від маркера до тексту */
}
</style>
</head>
<body> <ul> <li>Чебурашка</li> <li>Крокодил Гена</li> <li>Шапокляк</li>
</ul>
</body>
</html>У цьому прикладі маркер, встановлений за замовчуванням, ховається, а натомість додається символ (мал. 2).
Мал. 2. Маркери у вигляді символу
Щоб вибрати в якості маркера якийсь хитрий символ, можна скористатися програмою Microsoft Word або таблицею символів, це стандартна програма, що входить до комплекту Windows. Кодування коду повинно бути обов'язково UTF-8.