Псевдоэлементы :before и :after позволяют добавлять содержимое (стили) до и после элемента, к которому были применены.
![](https://habrastorage.org/r/w1560/storage2/c8d/7ca/113/c8d7ca113e112881a0c92b7152665f11.png)
Всего существует несколько типов псевдоэлементов: :first-line, :first-letter, ::selection, :before и :after. В этой статье подробно рассмотрены последние два, как наиболее полезные.
Псевдоэлементы появились еще в CSS1, но пошли в релиз только в CSS2.1. В самом начале в синтаксисе использовалось одно двоеточие, но в CSS3 используется двойное двоеточие для отличия от псевдоклассов:
![](https://habrastorage.org/r/w780q1/storage2/2b2/1b2/007/2b21b2007313a58b04be84c884fc9ced.jpg)
Но в любом случае, современные браузеры умеют понимать оба типа синтаксиса псевдоэлементов, кроме Internet Explorer 8, который воспринимает только одно двоеточие. Поэтому надежнее использовать одно.
Элементы :before и :after не будут сгенерированы, т.е. не будут видны в коде страницы, поэтому они и называются псевдоэлементами.
Использовать псевдоэлементы крайне просто: :before добавляется перед нужным элементом, а :after — после.
Для добавление контента внутри псевдоэлементов можно воспользоваться CSS-свойством content.
Простой пример: необходимо добавить кавычки для цитаты:
![](https://habrastorage.org/r/w780q1/storage2/521/7f4/0f0/5217f40f05105a34e71a7b696709d750.jpg)
К псевдоэлементом можно применять такие же стили, как и к «реальным»: изменение цвета, добавление фона, регулировка размера шрифта, выравнивание текста и т.д.
![](https://habrastorage.org/r/w780q1/storage2/e5c/c3d/2f2/e5cc3d2f24b0d7e9a53f8058850adbb7.jpg)
Созданные элементы по умолчанию inline-элементы, поэтому при указании высоты или ширины необходимо установить display: block:
![](https://habrastorage.org/r/w780q1/storage2/74b/fd1/d7f/74bfd1d7f06fd2fa6a96d358a72e4103.jpg)
Также внутри псевдоэлемента можно использовать картинку вместо обычного текста, и даже добавлять фоновое изображение.
![](https://habrastorage.org/r/w780q1/storage2/b74/7a3/6d4/b747a36d4e0d271fe0dbe9a46eb0e116.jpg)
В этом примере свойство content содержит пустую строку, это необходимо, иначе псевдоэлемент не будет правильно отображаться.
Псевдоэлементы могут быть использованы вместе с псевдоклассами, в нашем примере это поможет добавить hover-эффект кавычкам:
![](https://habrastorage.org/r/w780q1/storage2/df4/3c4/910/df43c4910d26eeca4bcfadd9a9fb557c.jpg)
Также можно применить свойство transition для плавного изменения цвета кавычек:
К сожалению, это нормально работает только в последних версиях Firefox.
Посмотреть демонстрацию примера из этой статьи.
Три примера использования псевдоэлементов :before и :afte:
![](https://habrastorage.org/r/w780q1/storage2/051/69f/ff8/05169fff81870ed628c949a2eadcb296.jpg)
![](https://habrastorage.org/r/w780q1/storage2/861/434/2b1/8614342b1a40dd1281e46fc58a00b2d4.jpg)
![](https://habrastorage.org/r/w780q1/storage2/924/619/573/92461957334f438023d0118baab66d7b.jpg)
![](https://habrastorage.org/storage2/c8d/7ca/113/c8d7ca113e112881a0c92b7152665f11.png)
Всего существует несколько типов псевдоэлементов: :first-line, :first-letter, ::selection, :before и :after. В этой статье подробно рассмотрены последние два, как наиболее полезные.
Синтаксис и поддержка браузерами
Псевдоэлементы появились еще в CSS1, но пошли в релиз только в CSS2.1. В самом начале в синтаксисе использовалось одно двоеточие, но в CSS3 используется двойное двоеточие для отличия от псевдоклассов:
![](https://habrastorage.org/storage2/2b2/1b2/007/2b21b2007313a58b04be84c884fc9ced.jpg)
Но в любом случае, современные браузеры умеют понимать оба типа синтаксиса псевдоэлементов, кроме Internet Explorer 8, который воспринимает только одно двоеточие. Поэтому надежнее использовать одно.
Пример использования псевдоэлементов
<p>
<span>:before</span>
Это основной контент.
<span>:after</span>
</p>
Элементы :before и :after не будут сгенерированы, т.е. не будут видны в коде страницы, поэтому они и называются псевдоэлементами.
Использование
Использовать псевдоэлементы крайне просто: :before добавляется перед нужным элементом, а :after — после.
Для добавление контента внутри псевдоэлементов можно воспользоваться CSS-свойством content.
Простой пример: необходимо добавить кавычки для цитаты:
![](https://habrastorage.org/storage2/521/7f4/0f0/5217f40f05105a34e71a7b696709d750.jpg)
blockquote:before {
content: open-quote;
}
blockquote:after {
content: close-quote;
}
Стилизация псевдоэлементов
К псевдоэлементом можно применять такие же стили, как и к «реальным»: изменение цвета, добавление фона, регулировка размера шрифта, выравнивание текста и т.д.
![](https://habrastorage.org/storage2/e5c/c3d/2f2/e5cc3d2f24b0d7e9a53f8058850adbb7.jpg)
blockquote:before {
content: open-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: left;
position: relative;
top: 30px;
}
blockquote:after {
content: close-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: rightright;
position: relative;
bottombottom: 40px;
}
Созданные элементы по умолчанию inline-элементы, поэтому при указании высоты или ширины необходимо установить display: block:
![](https://habrastorage.org/storage2/74b/fd1/d7f/74bfd1d7f06fd2fa6a96d358a72e4103.jpg)
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;
/** define it as a block element **/
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: rightright;
position: relative;
bottombottom: 40px;
border-radius: 25px;
/** define it as a block element **/
display: block;
height: 25px;
width: 25px;
}
Также внутри псевдоэлемента можно использовать картинку вместо обычного текста, и даже добавлять фоновое изображение.
![](https://habrastorage.org/storage2/b74/7a3/6d4/b747a36d4e0d271fe0dbe9a46eb0e116.jpg)
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: rightright;
position: relative;
bottombottom: 40px;
border-radius: 25px;
background: url(images/quotationmark.png) -1px -32px #ddd;
display: block;
height: 25px;
width: 25px;
}
В этом примере свойство content содержит пустую строку, это необходимо, иначе псевдоэлемент не будет правильно отображаться.
Использование вместе с псевдоклассами
Псевдоэлементы могут быть использованы вместе с псевдоклассами, в нашем примере это поможет добавить hover-эффект кавычкам:
![](https://habrastorage.org/storage2/df4/3c4/910/df43c4910d26eeca4bcfadd9a9fb557c.jpg)
blockquote:hover:after, blockquote:hover:before {
background-color: #555;
}
Добавление transition-эффекта
Также можно применить свойство transition для плавного изменения цвета кавычек:
transition: all 350ms;
-o-transition: all 350ms;
-moz-transition: all 350ms;
-webkit-transition: all 350ms;
К сожалению, это нормально работает только в последних версиях Firefox.
Посмотреть демонстрацию примера из этой статьи.
Немного вдохновения
Три примера использования псевдоэлементов :before и :afte:
Fascinating Shadows
![](https://habrastorage.org/storage2/051/69f/ff8/05169fff81870ed628c949a2eadcb296.jpg)
3D Button
![](https://habrastorage.org/storage2/861/434/2b1/8614342b1a40dd1281e46fc58a00b2d4.jpg)
Stacked Image Effect
![](https://habrastorage.org/storage2/924/619/573/92461957334f438023d0118baab66d7b.jpg)