Псевдоэлементы в CSS

В связи с релизом Интернет Эксплорера 7 хотелось бы упомянуть css псевдоэлементы, благо часть из них теперь поддерживается этим браузером тоже.

:first-line и :first-letter

Два этих псевдоэлемента дают хорошую возможность выделить начало абзаца или первую букву слова.

Пример применения:

p:first-letter {
font-size: 3em;
float: left;
}

p:first-line {
font-weight: bold;
}

Поддерживающие браузеры: Интернет Эксплорер 7, Файрфокс, Опера 9

:before и :after

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

:before и :after позволяют вставить контент перед и после любого HTML-элемента соответственно.

Допустимые значения свойства content в псевдоэлементах before и after:

-inhert
-[URI]
-[string]
-normal
-open-quote
-close-quote
-no-open-quote
-no-close-quote
-attr([attribute name])
-counter([name], [style])
-counters ([name], [string], [style])

Пример:

p:before{ content: url(images/arrow.gif); }
p:after { content: close-quote; }
li:before { content: ">>"; }

Поддерживающие браузеры: Файрфокс, Опера.

This entry was posted in CSS. Bookmark the permalink. Follow any comments here with the RSS feed for this post.

Leave a Reply

Your email is never published nor shared. Required fields are marked *

*

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>