::after (:after)
В CSS, ::after
создаёт псевдоэлемент, который является последним потомком выбранного элемента. Часто используется для добавления косметического содержимого в элемент с помощью свойства content
. По умолчанию является инлайновым.
/* Добавить стрелки после ссылок */
a::after {
content: "→";
}
Примечание: Псведоэлементы, созданные с помощью ::before
и ::after
содержатся в блоке форматирования элемента, и поэтому не применяются к замещаемым элементам, таким как <img>
или <br>
.
Синтаксис
Примечание: В CSS3 появилась запись ::after
(с двумя двоеточиями) для различения псевдоклассов и псевдоэлементов. Браузеры также поддерживают запись :after
, введённую в CSS2.
Примеры
Простое использование
Давайте создадим два класса, один для скучных параграфов и один для потрясающих. Затем мы сможем отметить каждый параграф добавлением псевдоэлемента в его конец.
HTML
<p class="boring-text">Вот простой скучный текст.</p>
<p>Вот нормальный текст, который не является ни скучным, ни потрясающим.</p>
<p class="exciting-text">
Помогать MDN легко и весело. Просто нажмите кнопку редактирования, чтобы
добавить новые живые примеры, или улучшить существующие примеры.
</p>
CSS
.exciting-text::after {
content: "<- теперь это *просто* потрясающе!";
color: green;
}
.boring-text::after {
content: "<- СКУЧНО!";
color: red;
}
Результат
Пример оформления
Можно стилизовать текст или изображения в свойстве content
практически любым способом.
HTML
<span class="ribbon">Посмотрите, где находится оранжевый прямоугольник.</span>
CSS
.ribbon {
background-color: #5bc8f7;
}
.ribbon::after {
content: "Посмотрите на этот оранжевый прямоугольник.";
background-color: #ffba10;
border-color: black;
border-style: dotted;
}
Результат
Подсказки
Следующий пример показывает использование псевдоэлемента ::after
в сочетании с CSS-выражением attr()
и пользовательского data-*
атрибута data-descr
для создания подсказки на чистом CSS.
HTML
<p>
Здесь находится живой пример вышеприведённого кода.<br />
У нас есть некоторый
<span data-descr="коллекция слов и знаков препинаний">текст</span> здесь с
несколькими
<span data-descr="маленькие всплывающие окошки, которые снова исчезают"
>подсказками</span
>.<br />
Не стесняйтесь, наводите мышку чтобы
<span data-descr="не понимать буквально">взглянуть</span>.
</p>
CSS
span[data-descr] {
position: relative;
text-decoration: underline;
color: #00f;
cursor: help;
}
span[data-descr]:hover::after {
content: attr(data-descr);
position: absolute;
left: 0;
top: 24px;
min-width: 200px;
border: 1px #aaaaaa solid;
border-radius: 10px;
background-color: #ffffcc;
padding: 12px;
color: #000000;
font-size: 14px;
z-index: 1;
}
Результат
Спецификации
Specification |
---|
CSS Pseudo-Elements Module Level 4 # generated-content |
Совместимость с браузерами
BCD tables only load in the browser