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

19.10.2011

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

Сегодня поговорим о псевдоэлементах CSS. Они не являются физическими объектами, а носят скорее виртуальный характер. Но, тем не менее, это очень мощное средство, которое, в тоже время, применяется очень просто. В этой части обсудим спецификацию CSS 2.1, а конкретнее — :first-letter, :first-line, :before и :after. Причем, на двух последних остановимся подробнее — очень уж интересные вещи можно сделать, используя эти два псевдоэлемента.

:first-letter и :first-line

first-line позволяет применить стиль к первой строке блочного элемента (то есть такого, у которого свойству display установлено значение blockinline-blocklist-itemtable-caption или table-cell) Например:


p:first-line {font-size: 24px;}

Этот код назначит размер шрифта в 24 пиксела каждой первой строке каждого абзаца.

Аналогично работает first-letter, но только для первой буквы. Например:


p:first-letter {font-size: 300%;}

Этот код назначит каждой первой букве параграфа размер шрифта в 300%. Маленькое уточнение — также стиль применяется для следующего за буквой знака препинания, если он есть. То есть для выражения: «А, кстати» — стиль будет применен и для запятой, учитывайте это. first-letter обычно применяют для создания буквицы, как в старых книгах. Больше ему применения я найти не могу.
Эти псевдоклассы поддерживают наследование, то есть для следующего кода:


<div><p>Lorem ipsum dolor sit amet...</p></div>

div:first-line {font-weight: bold}

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

Псевдоэлементы :before и :after

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

  • строка. Тут может быть что угодно, от URL, до стилей
  • url(). Обычно используется для вставки изображений.
  • counter()
  • counters(). Последние два используются для отображения счетчиков. Но я, честно говоря, никогда их в работе не видел. Если у кого есть что показать — буду благодарен.

Следует помнить, что CSS используется для изменения отображения, а не содержимого, поэтому content нужно использовать осторожно.
Псевдоэлементы :first-letter и :first-line также работают и для :before и :after. То есть, если вы добавили строку псевдоэлементом after, именно на него будет действовать first-letter.
Рассмотрим на примере, как это работает:

Я уже писал о создании ленты на CSS, тут повторюсь еще раз:


<div class="container">
<h1>:before и :after</h1>
<p>Lorem ipsum dolor sit amet..</p>
</div>

Структура простая, ничего особенного. Код CSS тоже не сложный, разберем только то, что нас интересует, псевдоэлементы.


.container h1:before,
.container h1:after {
content:"";
position:absolute;
z-index:-1;
top:100%;
left:0;
border-width:0 10px 10px 0;
border-style:solid;
border-color:transparent #9e9e9e;
}
.container h1:after {
left:auto;
right:0;
border-width:0 0 10px 10px;
}

Два треугольника, расположенные по краям. Один — зеркальное отражение другого. Первый выводится псевдоэлементом :after, второй — :before.

Поддержка браузерами

:first-letter и :first-line были введены в CSS1, поэтому поддерживаются повсеместно. Тем не менее, IE6 и IE7 имеют некоторые баги.
:before и :after были введены в спецификации CSS 2.1 и в полной мере реализованы в Firefox 3.5 +, IE 8 +, Safari 3 +, Google Chrome и Opera. IE6 и IE7 не поддерживают.
В большинстве случаев :before и :after могут быть использованы в рамках «прогрессивного улучшения», так как IE6 и IE7 будут просто игнорировать их. К тому же, есть замечательная библиотека Modernizr, которая может выручить в таких случаях.

Также рекомендую почитать руководство по градиентам и отражениям в CSS3

Подписывайтесь на обновления и удачного вам дня

, ,

Комментариев: 4

  1. GerinG

    Это только JavaScript, без вариантов. К сожалению, в нем я не силен, поэтому не помогу с этим

    Ответить
  2. Revolteck

    Помогите осуществить идею: на фоне страницы 2 фоновых изображения(на 2х слоях) т.е. одно перекрывает другое, нужно что бы с помощью скрипта(или ещё чего) вокруг курсора в ~100px радиусе просвещалось
    (с плавным переходом)
    нижнее фоновое изображение.

    Ответить
  3. akkad

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

    Ответить