Archie Goodwin

По определению :before и :after являются псевдо-элементами CSS. По сути, они существуют для того чтобы вы могли использовать их для вставки чего-то до или после целевого элемента. Есть немало статей посвященных этому вопросу, но я хотел описать в блоге именно реальные примеры использования, или, по крайней мере, показать, что я делал с их помощью.

Синтакс

Давайте предположим, что у нас есть следующий простой HTML-код:

<p> paragraph text </p> 

В этом случае, использовать псевдо-элемент можно так:

p:before {
 content: "this is ";
 font-weight: bold;
 font-style: italic;
}

В результате, получим следующее:

Имейте в виду, что на самом деле вы не добавляете что-то к содержимому, это лишь то что появится рядом с содержимым - перед или после.

Иконки

Очень популярно использование псевдо-элементов :before или :after именно для отображения картинки-иконки перед или после текста. На каждый такой псевдо-элемент вы можете наложить все свойства CSS - в том числе задать блоковое отображение элемента и в качестве фона установить изображение.

На тот же HTML код

<p> paragraph text </p> 

Наложим следующие стили CSS:

p:before {
 content: "";
 display: block;
 background: url("icon.jpg") no-repeat;
 width: 20px;
 height: 20px;
 float: left;
 margin: 0 6px 0 0;
}

Вот что из этого получится:

Стилизация внешних ссылок

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

<p>Krasimir Tsonev is <a href="http://krasimirtsonev.com">developer</a>
who likes to write and <a href="https://twitter.com/KrasimirTsonev">tweet</a>.</p>

Мы могли бы добавить небольшую иконку после каждой ссылки, указывающей на сторонний ресурс.

a {
 text-decoration: none;
 font-weight: bold;
 color: #000;
}
a:after {
 content: "";
 display: inline-block;
 background: url("icon-external.jpg") no-repeat top right;
 width: 14px;
 height: 12px;
}

"Хлебные крошки" (навигация)

Обычно "хлебные крошки" это набор ссылок стилизированная какими-то разделителями. Достичь такого эффекта с помощью чистого CSS можно благодаря тем же псевдо-элементам :before или :after.

HTML:

<p>
 <a href="#">Home</a>
 <a href="#">Team</a>
 <a href="#">Developers</a>
</p>

Несколько строк CSS:

a {
 text-decoration: none;
 font-weight: bold;
 color: #000;
}
a:after {
 content: " /";
}
a:first-child:before {
 content: " » ";
}
a:last-child:after {
 content: "";
}

Результат будет такой.

Добавили закрывающую кавычку только перед первой ссылкой в списке ссылок, к каждой из этих ссылок в конце добавили разделитель, а с последней ссылки этот разделитель убрали, благодаря чему получили полноценные "хлебные крошки", не прибегая к javascript или PHP.

Свойство float

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

<!-------- HTML -------->
<a href="#">Home</a>
<a href="#">Products</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at purus ac lacus ultrices vehicula.</p>
 

a {
 float: left;
 display: block;
 width: 100px;
 ... другие стили
}

Будет выглядеть так:

Текст все же лучше расположить ниже кнопок-ссылок, и вместо того чтобы добавить еще один блок, можно использовать псевдо-элементы :before или :after для дальнейшей очистки свойства float:

p:before {
 content: "";
 display: block;
 clear: both;
}

Цитаты

:before и :after идеально подходят для выделения цитат. Давайте предположим, что у нас есть умные мысли, которые бы нам хотелось выделить как цитаты:

<p> 
 Martin Fowler said
 <span class="quoted">Any fool can write code that a computer can understand. 
 Good programmers write code that humans can understand.</span>
</p>

Перевод: Мартин Фаулер сказал: "Любой дурак может написать код, который понимает компьютер. Хороший программист пишет код, который понимают люди."

Добавим художественные кавычки к тексту с помощью псевдо-элемент CSS и некоторое оформление чтобы было похоже что это цитата:

span.quoted {
 font-family: Georgia;
 font-size: 16px;
 display: block;
 margin: 14px 0 0 0;
 font-style: italic;
}
span.quoted:before {
 content: "“";
 font-size: 40px;
 color: #999;
 line-height: 0;
 display: inline-block;
 margin: 0 6px 0 0;
}
span.quoted:after {
 content: " ”";
 font-size: 40px;
 color: #999;
 line-height: 0;
 display: inline-block;
 margin: 0 0 0 4px;
}

Стрелки-треугольники

Речь идет о тех маленьких треугольниках, которые дизайнеры часто добавляют к всплывающим окнам или всплывающим подсказкам. Реализовать подобные треугольники-стрелки можно без использования картинок или JavaScript, исключительно за счет CSS, благодаря описываемым псевдо-элементам.

В качестве отправной точки возьмем следующий HTML код:

<h2>What is CSS?</h2>
<div class="popup">
 Cascading Style Sheets is a style sheet language used for describing
 the presentation semantics of a document written in a markup language.
</div>

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

h2 {
 float: left;
 width: 170px;
}
.popup {
 float: left;
 width: 340px;
 background: #727272;
 padding: 10px;
 border-radius: 6px;
 color: #FFF;
 position: relative;
 font-size: 12px;
 line-height: 20px;
}
.popup:before {
 content: "";
 display: block;
 width: 0; 
 height: 0; 
 border-top: 12px solid transparent;
 border-bottom: 12px solid transparent;
 border-right: 12px solid #727272; 
 position: absolute;
 top: 16px;
 left: -12px;
}

Стилизация заголовков

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

Опять для этого просто воспользуемся :before и :after

h2 {
 width: 100%;
 margin: 0;
 padding: 0;
 text-align: center;
}
h2:after {
 display: inline-block;
 margin: 0 0 8px 20px;
 height: 3px;
 content: " ";
 text-shadow: none;
 background-color: #999;
 width: 140px;
}
h2:before {
 display: inline-block;
 margin: 0 20px 8px 0;
 height: 3px;
 content: " ";
 text-shadow: none;
 background-color: #999;
 width: 140px;
}

Подведение итогов

Наиболее важным преимуществом псевдо-элементов :after и :before в том, что вы в состоянии изменять HTML разметку с помощью лишь CSS, не добавляя дополнительных элементов в HTML. Действительно приятно читать семантически чистый код разметки, да и визуально это выглядит лучше. Считаю, что это действительно замечательный инструмент CSS и, порой, то, что он есть очень спасает.