Китегории

Хочу изменить вид маркера на другой символ. Как это сделать?

6 мая 2022

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. Стандартные маркеры

<!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: "ƥ "; /* Добавляем в качестве маркера символ */
   }
  </style>
 </head>
 <body>
  <ul>
    <li>Чебурашка</li>
    <li>Крокодил Гена</li>
    <li>Шапокляк</li>
  </ul>
 </body>
</html>

В данном примере маркер, установленный по умолчанию, прячется, а взамен добавляется символ (рис. 2).

Рис. 2. Маркеры в виде символа

Чтобы установить в качестве маркера какой-нибудь хитрый символ, можно воспользоваться программой Microsoft Word или таблицей символов, это стандартная программа входящая в комплект Windows. Кодировка кода должна быть обязательно UTF-8.