В 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 для AndroidEdge MobileFirefox для AndroidOpera для AndroidiOS SafariSamsung Internet
Базовая поддержкаChrome Полная поддержка Да
Полная поддержка Да
Полная поддержка Да
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :after
Edge Полная поддержка Да
Полная поддержка Да
Полная поддержка Да
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :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 Полная поддержка Да
Полная поддержка Да
Полная поддержка Да
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :after
Chrome Android ? Edge Mobile Полная поддержка Да
Полная поддержка Да
Полная поддержка Да
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :after
Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Animation and transition supportChrome Полная поддержка 26Edge Полная поддержка ДаFirefox Полная поддержка 4IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Полная поддержка ДаChrome Android ? Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android ?

Легенда

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

См. также

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

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