::after

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨июль 2015 г.⁩.

В CSS,::after создаётпсевдоэлемент, который является последним потомком выбранного элемента. Часто используется для добавления косметического содержимого в элемент с помощью свойстваcontent. По умолчанию является инлайновым.

css

/* Добавить стрелки после ссылок */a::after {  content: "→";}

Примечание:Псведоэлементы, созданные с помощью::before и::afterсодержатся в блоке форматирования элемента, и поэтому не применяются кзамещаемым элементам, таким как<img> или<br>.

HTML

html

<p>Вот простой скучный текст.</p><p>Вот нормальный текст, который не является ни скучным, ни потрясающим.</p><p>  Помогать MDN легко и весело. Просто нажмите кнопку редактирования, чтобы  добавить новые живые примеры, или улучшить существующие примеры.</p>

CSS

css

.exciting-text::after {  content: "<- теперь это *просто* потрясающе!";  color: green;}.boring-text::after {  content: "<- СКУЧНО!";  color: red;}

Результат

Пример оформления

Можно стилизовать текст или изображения в свойствеcontent практически любым способом.

HTML

html

<span>Посмотрите, где находится оранжевый прямоугольник.</span>

CSS

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

html

<p>  Здесь находится живой пример вышеприведённого кода.<br />  У нас есть некоторый  <span data-descr="коллекция слов и знаков препинаний">текст</span> здесь с  несколькими  <span data-descr="маленькие всплывающие окошки, которые снова исчезают"    >подсказками</span  >.<br />  Не стесняйтесь, наводите мышку чтобы  <span data-descr="не понимать буквально">взглянуть</span>.</p>

CSS

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;}