::after

Базовая линия Широко доступна

Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

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

Попробовать

Примечание: Псевдоэлементы, генерируемые ::before и ::after — это инлайновые блоки, сгенерированные так, как будто они являются непосредственными потомками элемента, к которому они применяются, или «исходного элемента». Поэтому они не могут применяться к замещающим элементам, таким как <img>, чьё содержимое заменяется и не затрагивается стилями текущего документа.

Синтаксис

::after {
  content: /* value */;
  /* properties */
}

Если свойство content не указано, имеет недопустимое значение или имеет normal или none в качестве значения, то псевдоэлемент ::after не отображается. Он ведет себя так, как будто display: none установлено.

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

Доступность

Использование псевдоэлемента ::after для добавления контента не рекомендуется, так как он ненадёжно доступен для программных средств чтения с экрана.

Примеры

Базовое использование

Давайте создадим два класса: один для скучных абзацев, а другой — для захватывающих. Мы можем использовать эти классы для добавления псевдоэлементов в конец абзацев.

HTML

<p class="boring-text">Here is some plain old boring text.</p>
<p>Here is some normal text that is neither boring nor exciting.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.</p>

CSS

.exciting-text::after {
  content: " <- EXCITING!";
  color: darkgreen;
  font-weight: bolder;
}

.boring-text::after {
  content: " <- BORING";
  color: darkviolet;
  font-weight: bolder;
}

Результат

Пример декоративного использования

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

HTML

<span class="ribbon">Look at the orange box after this text. </span>

CSS

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

.ribbon::after {
  content: "This is a fancy orange box.";
  background-color: #ffba10;
  border-color: black;
  border-style: dotted;
}

Результат

Подсказки

Этот пример использует ::after, в сочетании с выражением CSS attr() и пользовательским атрибутом данных data-descr, для создания подсказок. JavaScript не требуется!

Мы также можем обеспечить поддержку пользователей клавиатуры с помощью этой техники, добавив фокус tabindex к каждому span для обеспечения возможности использования клавиатуры и используя CSS селектор :focus. Это демонстрирует гибкость ::before и ::after, хотя для наиболее доступного опыта, скорее всего, будет более уместно использование семантического раскрывающегося элемента, созданного иным способом (например, с элементами details и summary).

HTML

<p>
  Here we have some
  <span tabindex="0" data-descr="collection of words and punctuation">
    text
  </span>
  with a few
  <span tabindex="0" data-descr="small popups that appear when hovering">
    tooltips</span
  >.
</p>

CSS

span[data-descr] {
  position: relative;
  text-decoration: underline;
  color: #00f;
  cursor: help;
}

span[data-descr]:hover::after,
span[data-descr]:focus::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 Module Level 4 # generated-content

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`::after`	11	1212	1.5 ["Перед Firefox 57, в Firefox была ошибка, из-за которой псевдоэлементы `::after` всё ещё генерировались, даже если значение свойства `content` было установлено на `normal` или `none`.", "Перед Firefox 3.5, поддерживалось только поведение CSS уровня 2 для `:after`, что исключало `position`, `float`, `list-style-*` и некоторые `display` свойства."] 1	74	44	1818	4 ["Перед Firefox 57, в Firefox была ошибка, из-за которой псевдоэлементы `::after` всё ещё генерировались, даже если значение свойства `content` было установлено на `normal` или `none`.", "Перед Firefox 3.5, поддерживалось только поведение CSS уровня 2 для `:after`, что исключало `position`, `float`, `list-style-*` и некоторые `display` свойства."] 4	10.110.1	3.23.2	1.01.0	≤37≤37
`animation_and_transition_support`	26	12	4	15	7	26	4	14	7	1.5	4.4

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/::after