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

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

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

Синтаксис

/* CSS3 syntax */
::after

/* CSS2 syntax */
:after

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

Результат

Спецификации

Спецификация Статус Комментарий
CSS Pseudo-Elements Level 4
Определение '::after' в этой спецификации.
Рабочий черновик Нет значительных изменений по сравнению с предыдущей версией спецификации.
CSS Transitions
Определение 'transitions on pseudo-element properties' в этой спецификации.
Рабочий черновик Разрешает переходы для свойств, определённых в псевдоэлементах.
CSS Animations
Определение 'animations on pseudo-element properties' в этой спецификации.
Рабочий черновик Разрешает анимации на свойствах, определённых в псевдоэлементах.
Selectors Level 3
Определение '::after' в этой спецификации.
Рекомендация Введение синтаксиса с двумя двоеточиями.
CSS Level 2 (Revision 1)
Определение '::after' в этой спецификации.
Рекомендация Изначальное определение, используя синтаксис с одним двоеточием.

Поддержка браузерами

ВозможностьChromeEdgeFirefoxInternet ExplorerOperaSafari
Базовая поддержка

Да

Да1

Да

Да1

1.52 3

11

9

81

7

41

4

41

Animation and transition support26 Да4 Нет Нет Нет
ВозможностьAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Базовая поддержка

Да

Да1

?

Да

Да1

? ? ? ?
Animation and transition support Да ? Да4 Нет Нет ?

1. Supported as :after.

2. Before Firefox 57, Firefox had a bug where ::after pseudo-elements were still generated, even if the content property value were set to normal or none.

3. Before Firefox 3.5, only the CSS level 2 behavior of :after was supported, which disallowed position, float, list-style-* and some display properties.

См. также

Метки документа и участники

Внесли вклад в эту страницу: pgpa, Nerill, dima74, andreww2012
Обновлялась последний раз: pgpa,