Очередной блог фрилансерао моей работе в сети и не только

Как известно дизайнеры – творческие люди, и верстальщики им не указ, как нарисуют, так и приходится делать, а это далеко не всегда выполнимая задача. Один из распространенных дизайнерских приемов – это украшение каждой позиции списка каким-нибудь замысловатым маркером.

Верстать такой список проще простого – картинка задается через css-свойсво list-style-image, и ваш список выглядит точно как в макете. Но пару раз мне попадались макеты, где в качестве маркера списка использовались различные типографские знаки, типа длинного тире, решетки и кавычки. В принципе можно и их сохранить как картинку, но не так давно я узнала другой, более изящный способ.

Все очень просто, подобно псевдо-классу :hover, имеется псевдо-элемент :before, который то и определяет что именно должно отображаться перед заданным элементом. Применительно к спискам, это можно записать следующим образом:

li:before{
	content: "# ";
	color: #005070;
}

Здесь content, как нетрудно догадаться и есть свойство, определяющее что же именно за содержимое должно отображаться перед позицией списка. Следует заметить, типографские символы записываются в шестнадцатеричном коде.

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

И все бы хорошо, но имеется проблема с всеми любимым браузером. Internet Explorer, вплоть до 8 версии, не поддерживает before. Однако это проблема разрешима, спасибо статье  Владимир Токмакова, на сайте студии Артемия Лебедева. Оказалось, что в IE, можно эмулировать before, через expression, следующим образом:

li{
  list-style: none;
  behavior: expression( !this.before
    ? this.before = this.innerHTML = '#  ' + this.innerHTML : '' );
  color: #005070;
  line-height: 20px;
}

Вот и все, благодаря этим нехитрым действиям, у нас есть списки, корректно работающие во всех браузерах.