Выбор стандартных маркеров в списках в общем невелик, особенно если вести речь о ненумерованных списках. Как быть, если стоит задача создать и использовать свои собственные маркеры, текстовые или графические? Задача эта вполне решаема….

Правда сразу оговорюсь, что для начала мы разберем скорее теоретические основы, поскольку существует браузер названИЕкоторого все знают. Нормальное решение основано на использовании автоматически генерируемого контента, а вышеупомянутый браузер (будем честными до конца – не только он один) не поддерживает эту возможность. Зато это прекрасно работает в Mozilla, FireFox, Netscape 6+, Opera и Safari. А затем разберем и универсальное решение. К сожалению не такое изящное.

Посмотрите на этот CSS-код:

ul {
  list-style:none;
  margin:0;
  padding:0 0 0 1em;
  text-indent:-1em;
}
li {
  width:20%;
  padding:0;
  margin:0 0 0.25em 0;
}
li:before {
  content:"\00BB \0020";
}

Для начала скрываем маркер списка, который имеется по умолчанию с помощью list-style:none; затем устанавливаем левый отступ 1em, но при этом сдвигаем текст влево на ту же величину, т.е. -1em для того, чтобы «вытолкнуть» стандартный маркер из блока элемента списка. С помощью псевдоэлемента :before генерируем текстовый маркер. В свойстве content нужные символы указаны с помощью шестнадцатеричного escape-эквивалента Unicode, как того требует спецификация CSS2.1. В примере сгенерирована последовательность символов из двойной стрелки-ёлочки и пробела. Изящно, просто и красиво, но не для IE …

… и решение, которое подойдет для всех браузеров. К сожалению, уже не такое красивое. Текстовый маркер придется просто вставлять перед каждым элементом списка. Как показано ниже:

<ul>
  <li>» Первый пункт списка</li>
  <li>» Второй пункт списка</li>
  <li>» Третий пункт списка</li>
  <li>» Четвертый пункт списка</li>
  <li>» Пятый пункт списка</li>
</ul>

а таблицу стилей для этого варианта надо немного изменить. Вот так:

ul {
  list-style:none;
  margin:0;
  padding:0 0 0 1em;
}
li {
  width:20%;
  padding:0;
  margin:0 0 0.25em 0;
}

Однако и в этом способе есть недостаток, правда не очень критический. Если в браузере пользователя отключена поддержка CSS, он увидит два маркера для каждого элемента списка – маркер, генерируемый браузером и маркер, который мы добавили вручную.

Разберем другой вопрос: как сделать маркер, используя картинку?

Для того, чтобы применить графический маркер используется свойство list-style-image, как показано в примере ниже

ul {
  list-style-type: disc;
  list-style-image: url(marker.png);
}

Свойство list-style-type используется здесь на всякий случай, если браузер пользователя не имеет возможности использовать изображение. А в свойстве list-style-image задается путь к нужной картинке. Управлять размером картинки, которая используется как маркер списка, из таблицы CSS мы не сможем и поэтому надо убедиться в том, что картинка имеет подходящие размеры. Еще один нюанс состоит в том, что значения графических маркеров наследуются и если Вы создаете вложенные списки и хотите отказаться от маркера изображения в них, надо опять использовать свойство list-style-image. Вот таким образом:

ul ul {
  list-style-image:none;
}

А вот если хочется в качестве маркера списка иметь довольно большую картинку, такой способ уже не подойдет, поскольку часть картинки может быть просто «обрезана». Чтобы обойти это ограничение нужно поступить несколько иначе:

ul {
  margin-left:10px;
  padding-left:0px;
  list-style:none;
}
li {
  padding:0.5em 0 0.5em 54px;
  font: 1.3em/1.6 Verdana, Arial, sans-serif;
  background:url(bigMarker.png) no-repeat;
}

Сначала задаем значения и для левого поля и для левого отступа списка (почему именно так, я объяснял в одной из предыдущих статей). Потом удаляем маркер, используемый по умолчанию. Теперь главное: padding:0.5em 0 0.5em 54px; – мы освобождаем место слева от элемента списка, для того, чтобы вставить туда нашу большую картинку (например 54х54 пиксела), затем задаем свойство font таким образом, чтобы текст элемента списка не диссонировал с размером картинки-маркера и наконец используем свойство background, чтобы эту картинку вставить в качестве маркера списка.

Надеюсь, что это статья поможет кому-нибудь…