:after

Описание

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

::after
Значения: нет
Начальное значение: нет
Область применения: все элементы
Наследование: нет
Поддержка браузерами: Internet Explorer 8+, Chrome 1+, Opera 7+, Safari 1+, Firefox 1+
Версия CSS: CSS 3
Примечание:

Синтаксис

CSS2

element:after  {style properties}

CSS3

element::after {style properties}

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

Internet Explorer 8 поддерживает только :after. Поддержка ::after только с версии 9.

Пример

С помощью :after можно, например, выделить на странице бесплатные предложения.

.bp::after {
    content: "Бесплатно";
    background-color: yellow;
    color: red;
}
<!DOCTYPE HTML>
<head>
	<meta http-equiv="content-type" content="text/html" />
	<title>Псевдо-элементы :after и ::after</title>
</head>
<body>
	<h2>Псевдо-элементы :after и ::after - Демонстрационная страница</h2>
    <p>Lorem ipsum dolor sit amet, lorem velit. </p>
	<p class="bp">Placerat vehicula nesciunt. </p>
	<p>Pede donec rhoncus, orci arcu. </p>
	<p>Magna placerat, pretium ut vivamus. </p>
	<p class="bp">Dui lacus arcu, neque quaerat enim. </p>
</body>
</html>

Результат

ДЕМО

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *