Псевдоэлемент CSS ::after
В CSS ::after создаёт псевдоэлемент, который является последним дочерним элементом выбранного элемента. Он генерирует контент, который отображается после исходного содержимого элемента. Его можно использовать для вставки символов, текстовых строк или изображений.
Значение определяется свойством content.
По умолчанию псевдоэлемент ::after является строчным.
Его можно анимировать, позиционировать или обтекать, как и любой другой контент.
Псевдоэлемент ::after также можно использовать с синтаксисом с одинарной двоеточием :after, который поддерживается всеми браузерами.
Псевдоэлемент ::before добавляет контент перед любым другим содержимым, тогда как псевдоэлемент ::after добавляет контент после любого другого содержимого в HTML.
INFO
Псевдоэлементы, создаваемые с помощью ::after и ::before, не применяются к заменённым элементам (например, <br>, <img>).
Версия
Синтаксис
Псевдоэлемент CSS ::after
::after {
css declarations;
}Пример использования псевдоэлемента ::after:
Пример CSS ::after
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::after {
content: " - William Shakespeare.";
}
</style>
</head>
<body>
<h2>::after selector example</h2>
<p>"Be or not to be"</p>
</body>
</html>В следующем примере к контенту можно добавить стили.
Пример псевдоэлемента ::after со стилизованным контентом:
Пример псевдоэлемента ::after со стилизованным контентом:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::after {
content: " - William Shakespeare.";
background-color: #eee;
color: #1c87c9;
padding: 5px 3px;
border: 2px dashed #000;
margin-left: 5px;
}
</style>
</head>
<body>
<h2>::after selector example</h2>
<p>"Be or not to be"</p>
</body>
</html>Практика
Что делает псевдоэлемент ::after в CSS?