Эй! Спасибо, что решили посмотреть на тему! Осмотритесь вокруг
и подпишитесь на RSS feed чтобы узнавать обо всех обновлениях. До встречи!

Архив Август, 2017

С помощью HTML или CSS допускается устанавливать один из трех типов маркеров: disc (точка), circle (кружок), square (квадрат). Добавлять эти значения нужно к стилевому параметру list-style-type, который указывается для селектора UL или LI.

Пример

Квадратные маркеры UL {  list-style-type: square; }

     

  • Чебурашка
  •  

  • Крокодил Гена
  •  

  • Шапокляк

Выбор и установка собственного символа маркера происходит весьма своеобразно, через псевдоэлемент before. Вначале следует вообще убрать маркеры у списка, присвоив значение none стилевому атрибуту list-style-type, а затем через двоеточие добавить псевдоэлемент before к селектору LI. Сам вывод символа осуществляется с помощью параметра content, в качестве значения которого и выступает желаемый текст или код знака в юникоде.

Пример

Символ в качестве маркера LI {  list-style-type: none; } LI:before {  content: «+ «; }

     

  • Чебурашка
  •  

  • Крокодил Гена
  •  

  • Шапокляк

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

Замечание

Псевдоэлемент before не работает в браузере Internet Explorer, поэтому собственные маркеры в нем отображаться не будут.

Чтобы установить в качестве маркера какой-нибудь хитрый символ, можно воспользоваться программой Microsoft Word, выбрав меню Вставка > Символ… После чего откроется окно, как показано на рис. 1.

Рис. 1. Выбор символа в программе Microsoft Word

Код знака, выделенный на рисунке цветом, следует вписать в качестве параметра content, добавив перед ним слэш. Например, для приведенного символа следует указывать content: «\25aa».