| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 8.0+ | 1.0+ | 7.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Завдання
Змінити вид маркерів у списку і замінити їх на інший символ.
Рішення
За допомогою HTML або CSS допускається встановлювати один з трьох типів маркерів: disc (точка), circle (коло), square (квадрат). Додавати ці значення потрібно до стильового властивості list-style-type, яке вказується для селектора UL або LI (приклад 1).
Приклад 1. Стандартні маркери
HTML5CSS 2.1IECrOpSaFx
<!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
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Символ у якості маркера</title>
<style>
li {
list-style-type: none; /* Прибираємо маркери у списку */
}
li:before {
content: "♜"; /* Додаємо в якості маркера символ */
}
</style>
</head>
<body>
<ul>
<li>Житомир</li>
<li>Вінниця</li>
<li>Київ</li>
</ul>
</body>
</html>
В даному прикладі маркер, установлений за замовчуванням, ховається, а натомість додається символ (рис. 2).
Рис. 2. Маркери у вигляді символу
Щоб встановити в якості маркера який-небудь хитрий символ, можна скористатися програмою Microsoft Word або таблицею символів, це стандартна програма входить в комплект Windows. Кодування коду повинна бути обов'язково UTF-8.