CSS псевдоэлемент ::after

Значение и применение

Псевдоэлемент ::after добавляет определённое содержимое после каждого указанного элемента. Псевдоэлемент ::after используется вместе со свойством content, которое необходимо для вставки сгенерированного контента.

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

/* синтаксис CSS 3 */
селектор::псевдоэлемент {  /* двойное двоеточие */
CSS свойство: значение;
}
/* синтаксис CSS 2 */ 
селектор:псевдоэлемент { /* одинарное двоеточие */
CSS свойство: значение;
}

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

Селектор	Chrome	Firefox	Opera	Safari	IExplorer	Edge
::after	4.0	3.5	7.0*	3.1	9.0*	12.0

CSS синтаксис:

::after {
content : " ";
блок объявлений;
}

Версия CSS

CSS2

Пример использования

Рассмотрим пример, в котором после каждого блока с изображением и после каждого абзаца будет генерироваться (добавляться) определенная фраза:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример использования псевдоэлемента ::after</title>
<style>
img { /* выбираем все изображения */
width: 100px;  /* задаем ширину элемента */
height: 100px;  /* задаем высоту элемента */
}
div.omg::after { /* выбираем все элементы <div> с классом omg и добавляем после каждого содержимое */
content: "Спасибо за внимание!"; /* содержимое, которое будет добавлено */
} 
p::after { /* выбираем все элементы <p> и добавляем после каждого содержимое */
content: " - Ваш ответ"; /* содержимое, которое будет добавлено */
} 
</style>
</head>
	<body>
		<div class = "omg">
			<img src = "nich.jpg" alt = "nich">
		</div>
		<div class = "omg">
			<img src = "nich.jpg" alt = "nich">
		</div>
		<p>Нет</p>
		<p>Да</p>
	</body>
</html>

В этом примере мы указали фиксированную ширину для всех изображений (ширина и высота 100 пикселей). Кроме того, мы выбрали все элементы <div> с классом omg и добавили после них определенную фразу. После абзацев (элементы <p>) также добавляется определенная фраза.

Обращаю Ваше внимание, что к таким элементам как <input> и <img> напрямую псевдоэлемент ::after применить нельзя. Один из выходов из этой ситуации – заключить элемент в блочный элемент <div>.

Результат нашего примера:

Пример использования псевдоэлемента ::after.

Выведем содержание, как значение атрибута элемента, использую псевдоэлемент :after и свойство content:

<!DOCTYPE html>
<html>
<head>
<title>Пример использования счетчиков в CSS.</title>
<style> 
a:after {/* Псевдоэлемент :after добавляет содержимое, указанное в свойстве content после каждого элемента <а> */
content : ""attr(title)""; /* между всеми тегами <a></a> автоматически будет проставляться значение атрибута title */
}
</style>
</head>
<body>
<a href = "http://basicweb.ru" title = "Basicweb.ru"></a>
</body>
</html>

Пример добавления и изменения кавычек в тексте, используя CSS свойства content, quotes, а также псевдоэлементов :before и :after:

<!DOCTYPE html>
<html>
<head>
<title>Пример добавления кавычек к тексту в CSS</title>
<style> 
* {
quotes : "«" "»" "‹" "›"; /* используя универсальный селектор устанавливаем тип кавычек для первого и второго уровня вложенности (для всех элементов) */
}
p:before {content : open-quote;}  /* используя псевдоэлемент :before добавляем перед элементом <p> открывающиеся кавычки */
p:after {content : close-quote;}  /* используя псевдоэлемент :after добавляем после элемента <p> закрывающиеся кавычки */
</style>
</head>
<body>
<q>Обычная цитата<q>
<q>Это <q>ЦИТАТА</q> внутри цитаты</q>
<p>Параграф, к которому, используя псевдоклассы добавлены кавычки.</p>
</body>
</html>

Пример добавления и изменния кавычек в тексте. — Пример добавления и изменения кавычек в тексте.

CSS селекторы