--- title: '::after (:after)' slug: 'Web/CSS/::after' tags: - CSS - Layout - Reference - Web - Псевдоэлементы translation_of: 'Web/CSS/::after' ---
{{CSSRef}}

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

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

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

Синтаксис

{{csssyntax}}

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

Результат

{{EmbedLiveSample('Простое_использование', 500, 150)}}

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

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

HTML

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

CSS

.ribbon {
  background-color: #5BC8F7;
}

.ribbon::after {
  content: "Посмотрите на этот оранжевый прямоугольник.";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}

Результат

{{EmbedLiveSample('Пример_оформления', 450, 20)}}

Подсказки

Следующий пример показывает использование псевдоэлемента ::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;
}

Результат

{{EmbedLiveSample('Подсказки', 450, 120)}}

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

Спецификация Статус Комментарий
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}} {{Spec2('CSS4 Pseudo-Elements')}} Нет значительных изменений по сравнению с предыдущей версией спецификации.
{{Specname("CSS3 Transitions", "#animatable-properties", "transitions on pseudo-element properties")}} {{Spec2("CSS3 Transitions")}} Разрешает переходы для свойств, определённых в псевдоэлементах.
{{Specname("CSS3 Animations", "", "animations on pseudo-element properties")}} {{Spec2("CSS3 Animations")}} Разрешает анимации на свойствах, определённых в псевдоэлементах.
{{SpecName('CSS3 Selectors', '#gen-content', '::after')}} {{Spec2('CSS3 Selectors')}} Введение синтаксиса с двумя двоеточиями.
{{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}} {{Spec2('CSS2.1')}} Изначальное определение, используя синтаксис с одним двоеточием.

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

{{Compat("css.selectors.after")}}

Смотрите также