Вся правда о псевдоэлементах :before и :after

      CSS

Здравствуйте, уважаемые читатели XoZbloga! Рассмотрим сегодня псевдоэлементы, а именно разберемся с :before и :after. Что такое псевдоэлемент и как он отличается от псевдокласса? Как :before и :after реализованы в CSS? Вы наверняка видели их к примеру, в стилях уже готовых меню, но никогда не вдавались в подробности, для чего они нужны, а просто брали и использовали меню. Настало время расставить все по своим местам и научиться пользоваться псевдоэлементами самостоятельно.

Псевдоэлементы :before и :after по отношению к элементу

Что такое псевдокласс и псевдоэлемент?

Псевдоклассы определяют положение элементов в дереве документа и их динамическое состояние, которое изменяется со временем или под действием пользователя. Например, текстовая ссылка, которая изменяет свой цвет при наведении на нее курсора.

В то время как, псевдоэлементы задают стиль для элементов не существующих в дереве элементов документа и создают текстовое содержимое, которого нет в исходном коде.

Более подробно о псевдоклассах поговорим в одной из следующих статей.

Немного теории о псевдоэлементах

Псевдоэлементы появились еще в рекомендации CSS1, однако :before и :after, речь о которых пойдет дальше были выпущены в CSS2.1. Что касается синтаксиса:

1
Селектор:Псевдоэлемент { Описание правил стиля }

Вначале идет имя селектора, после пишется двоеточие, а затем следует имя псевдоэлемента. Изначально для обозначение псевдокласса и псевдоэлемента применялось одно двоеточие, однако с приходом CSS3 для того, чтобы разделять где псевдокласс, а где псевдоэлемент для последнего ввели два двоеточия (::before и ::after). Однако если продолжать использовать одно, ошибкой это не будет (кроме ::selection — всегда с двумя двоеточиями).

Список всех псевдоэлементов:

Имя Описание
:before применяется для вставки контента перед элементом;
:after применяется для вставки контента после элемента;
::first-letter представляет собой первый символ первой строки текста внутри элемента;
::first-line представляет собой первую линию форматированного текста;
::selection представляет собой часть документа, которая была выделена мышкой.

Как это работает?

Как говорилось выше, псевдоэлементы :before и :after создают дополнительные элементы до или после содержимого основного элемента, так что когда мы используем эти псевдоэлементы, технически это равнозначно следующей разметке.

1
2
3
4
5
<p>  
<span>:before</span>  
    Здесь основной контент.  
<span>:after</span>  
</p>

Но те элементы, которые генерируют псевдоэлементы, не создаются на самом деле. Поэтому их не возможно найти в исходном коде.

Использование псевдоэлементов

Использовать псевдоэлементы относительно легко. Давайте разберем создание цитат, с применением псевдоэлементов.

Цитата с окантовкой кавычками (псевдоэлементы)

Окантуем текст цитаты кавычками. Разметка HTML следующая:

1
2
3
<blockquote>
     <p>......</p>
</blockquote>

А стили выглядят пока так:

1
2
3
4
5
6
blockquote:before {  
    content: open-quote;  
}  
blockquote:after {  
    content: close-quote;  
}

Стилизация кавычек

Несмотря на то, что поддельные элементы, созданные псевдоэлементами на самом деле ведут себя как «реальные», мы можем задать для них любые стили оформления. Такие как: цвет, фон, размер шрифта, выравнивание текста внутри элемента и так далее.

Если мы хотим указать ширину и высоту псевдоэлемента, мы должны использовать значение block для свойства display.

Псевдоэлементы - Стилизация

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
blockquote:before {  
    content: open-quote;  
    font-size: 24pt;  
    text-align: center;  
    line-height: 42px;  
    color: #fff;  
    background: #ddd;  
    float: left;  
    position: relative;  
    top: 30px;  
border-radius: 25px;  
 
    /** определяем как блочный элемент **/  
    display: block;  
    height: 25px;  
    width: 25px;  
}  
blockquote:after {  
    content: close-quote;  
    font-size: 24pt;  
    text-align: center;  
    line-height: 42px;  
    color: #fff;  
    background: #ddd;  
    float: right;  
    position: relative;  
    bottombottom: 40px;
border-radius: 25px;  
 
    /** определяем как блочный элемент **/  
    display: block;  
    height: 25px;  
    width: 25px;
}

С изображением

Мы также можем использовать изображение (а не только простой текст) в качестве контента псевдоэлемента.

Псевдоэлементы с картинками

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
blockquote:before {  
    content: " ";  
    font-size: 24pt;  
    text-align: center;  
    line-height: 42px;  
    color: #fff;  
    float: left;  
    position: relative;  
    top: 30px;  
    border-radius: 25px;  
 
    background: url(images/quotationmark.png) -3px -3px #ddd;  
 
    display: block;  
    height: 25px;  
    width: 25px;  
}  
blockquote:after {  
    content: " ";  
    font-size: 24pt;  
    text-align: center;  
    line-height: 42px;  
    color: #fff;  
    float: right;  
    position: relative;  
    bottombottom: 40px;  
    border-radius: 25px;  
 
    background: url(images/quotationmark.png) -1px -32px #ddd;  
 
    display: block;  
    height: 25px;  
    width: 25px;  
}

Однако, как Вы можете видеть на приведенном выше отрывке, мы все еще объявляем свойство content и на этот раз, в качестве значения пустая строка. Content является обязательным свойством, в противном случае псевдоэлемент не будет работать вообще.

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

Мы можем использовать псевдоклассы наряду с псевдоэлементами в одном правиле CSS, например, если мы хотим сделать фон кавычек немного темнее, при наведение курсора мыши на цитату.

Псевдоэлементы и псевдоклассы в одном правиле CSS

1
2
3
blockquote:hover:after, blockquote:hover:before {
      background-color: #555;
   }

Добавим Transition эффект

Ну и для большего изящества добавим эффект плавного заполнения кавычек цветом, при наведении курсора на цитату.

1
2
3
4
transition: all 350ms;  
-o-transition: all 350ms;  
-moz-transition: all 350ms;  
-webkit-transition: all 350ms;

Более подробно об эффекте transition в уроке — CSS слайдер изображений с эскизами

Вы можете посмотреть, что у нас получилось 🙂

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницу ВКонтакте или подпишитесь на почтовую рассылку. Не забывайте оставлять комментарии к статьям и урокам. Спасибо!

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!