Главная » Псевдоэлементы в CSS

Псевдоэлементы в 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: ">>"; }

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



Еще нет комментариев »

Оставить комментарий

XHTML (Разрешенные теги): <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong> .

Если вы хотите вставить в комментарий код, то жмите на кнопку "HTML" в редакторе и используйте теги <pre><code> и </pre></code> для вставки.

Не забывайте о том, что теги, вставленые без использования &lt;/&gt; будут автоматически трансформироваться.

Цитировать отмеченый текст