::after (:after)

В 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' в этой спецификации.
Рекомендация Изначальное определение, используя синтаксис с одним двоеточием.

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
::afterChrome Полная поддержка 1
Полная поддержка 1
Полная поддержка 1
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :after
Edge Полная поддержка 12
Полная поддержка 12
Полная поддержка 12
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :after
Firefox Полная поддержка 1.5
Замечания
Полная поддержка 1.5
Замечания
Замечания 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.
Замечания Before Firefox 3.5, only the CSS level 2 behavior of :after was supported, which disallowed position, float, list-style-* and some display properties.
Полная поддержка 1
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :after
IE Полная поддержка 9
Полная поддержка 9
Полная поддержка 8
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :after
Opera Полная поддержка 7
Полная поддержка 7
Полная поддержка 4
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :after
Safari Полная поддержка 4
Полная поддержка 4
Полная поддержка 4
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :after
WebView Android Полная поддержка ≤37
Полная поддержка ≤37
Полная поддержка ≤37
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :after
Chrome Android Полная поддержка 18
Полная поддержка 18
Полная поддержка 18
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :after
Firefox Android Полная поддержка 4
Замечания
Полная поддержка 4
Замечания
Замечания 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.
Замечания Before Firefox 3.5, only the CSS level 2 behavior of :after was supported, which disallowed position, float, list-style-* and some display properties.
Полная поддержка 4
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :after
Opera Android Полная поддержка 10.1
Полная поддержка 10.1
Полная поддержка 10.1
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :after
Safari iOS Полная поддержка 3.2
Полная поддержка 3.2
Полная поддержка 3.2
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :after
Samsung Internet Android Полная поддержка 1.0
Полная поддержка 1.0
Полная поддержка 1.0
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :after
Animation and transition supportChrome Полная поддержка 26Edge Полная поддержка 12Firefox Полная поддержка 4IE Нет поддержки НетOpera Полная поддержка 15Safari Нет поддержки НетWebView Android Полная поддержка ≤37Chrome Android Полная поддержка 26Firefox Android Полная поддержка 4Opera Android Полная поддержка 14Safari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 1.5

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Смотрите замечания реализации.
Смотрите замечания реализации.
Использует нестандартное имя.
Использует нестандартное имя.

См. также