::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 ?

Легенда

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

См. также