19 августа 2010, 14:52

CSS :before / :after

Контент в начале/в конце для разных элементов задаётся с помощью :псевдо классов :before / :after и параметра content.
.feedbacks blockquote:before,
.feedbacks blockquote:after {
	color: #000;
	padding: 5px;
	font-size: 24px;
	line-height: 12px;
}
.feedbacks blockquote:before { content: "«"; margin-left: -23px;}
.feedbacks blockquote:after { content: "»";}

Всё казалось бы просто, но есть одно но, в параметр content нельзя вставить спецсимвол простым кодом, нужно вставлять через косые утф-значение символа
.banner a:after { content: "\2192\ ";}

Это пример для символа →, он же →
css
Лучший xml2array     ←   Ctrl   →     HTML5 и async атрибут в тэге script

4 комментария РСС

DeerUA
И да, блог не умер, было много работы, очень.
Скоро запишу сюда много всего, например разные эксперименты с css3 и html5
Тормоз
Ты уверен, что ничего не путаешь? С каким браузером пришлось так изголятсья? Насколько помню, у меня никаких проблем не было со вставкой обычнх символов в UTF-8.

С :before/:after зато были другие проблемки — http://brokenbrake.biz/2009/07/31/my-acid-test Но сейчас всё ОК, вроде, у меня FF 3.6.6, тест проходит.
Vitaliy Bogdanets
Со всеми, хотя наверное кодировка тому виной, у меня она была вин1251 в html.
Тормоз
Ну ты даёшь. Ещё в самом начале двадцать первого века можно было благополучно забыть про все кодировки кроме UTF-8. Извращенец :)
Vitaliy Bogdanets
Не всегда, вес файлов, запросов, данных с утф8 увеличивается в 2 раза. Ингода это излишне, например на мелких хостингах с толстыми цмс
Тормоз
В два раза могут увеличиться только русскоязычные текстовые файлы. Латинский символ в UTF-8 занимает ровно столько же места, сколько и в однобайтовых кодировках.

Ваш комментарий

адрес не будет опубликован

ХТМЛ не работает


Ctrl + Enter