Пример 1
Как внести содержание после всех элементов <p>:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
p:after { content:" - Запомни это"; }
</style>
</head>
<body>
<p>Меня зовут Дональд</p>
<p>Я живу в Дакбурге</p>
<b>Примечание:</b> Для того, чтобы :after работал в IE, необходимо указать DOCTYPE.
</body>
</html>
Определение и использование
Селектор :after вносит содержание после указанного/ых элемента/ов.
Используйте свойство CSS content для определения содержания.
Поддержка браузеров
Селектор :after поддерживается во всех ведущих браузерах.
Примечание: Для того, чтобы :after работал в IE, необходимо указать !DOCTYPE.
Версия CSS
Селектор :after впервые представлен в: CSS 2
Еще примеры
Пример 2
Стилизует внесенное содержание:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
p:after {
content:" - Запомните это";
background-color:yellow;
color:red;
font-weight:bold;
}
</style></head>
<body>
<p>Меня зовут Дональд</p>
<p>Я живу в Дакбурге</p>
<b>Примечание:</b> Для того, чтобы :after работал в IE, необходимо указать DOCTYPE.
</body>
</html>
Была ли эта информация полезной?
