Вставка спецсимволов в генерируемый контент

Используя псевдоэлементы :after и :before можно вставлять автоматически генерируемый контент до и после элемента HTML. Например, before часто используют для генерации маркера списка.

Если ты решил применить данную технику, нужно помнить о ее подводных камнях:

1. IE6-7 не понимают after и before, и их придется эмулировать с помощью expression;
2. спецсимволы в content нельзя вставлять в прямом виде.

Если первому «камешку» посвящена отдельная статья, то на втором хочу остановиться немного подробнее.

Предположим, нужно вставить маркер «короткое тире» перед каждым элементом списка. Ищу в таблице спецсимволов нужный мне код: ага, короткое тире это – или –

Прочитав статьи, ссылки на которые приведены выше пробую такой код:

li{
	//z-index: expression(runtimeStyle.zIndex = 1, this.innerHTML = "–" + this.innerHTML) /* хак для ие6 и 7 */
}
li:before{
	content: "-";
}

…и получаю неверный результат! Вместо спецсимвола на страничке отображается его код!

Вот и встретили мы второй «камешек». А дело в том, что в expression спецсимволы можно писать цифровым или мнемоническим кодом, а в свойстве content — нет. Тут нужно ставить слеш и шестнадцатеричный код (переводим в шестнадцатеричную систему обычный числовой код). В нашем случае 8211 десятичное, это шестнадцатеричное. Итак, правильный код будет такой:

li{
	//z-index: expression(runtimeStyle.zIndex = 1, this.innerHTML = "–" + this.innerHTML) /* хак для ие6 и 7 */
}
li:before{
	content: "2013";
}

Для того, чтобы облегчить тебе перевод (а заодно и подбор подходящего спецсимвола) мы сделали специальный калькулятор (в инпуты вводим только числовой код, без значков ):

Также можно воспользоваться расширенной версией калькулятора спецсимволов.