W3docs
ru
Войти

CSS псевдоэлемент ::after

Используйте псевдоэлемент CSS ::after для добавления содержимого после элемента. Узнайте о нём и попробуйте примеры.

CSS псевдоэлемент ::after создаёт дополнительный элемент, который вставляется как последний дочерний элемент совпадающего элемента — сразу после его реального содержимого. Вам не нужно добавлять разметку в HTML — браузер генерирует элемент из вашей таблицы стилей. Эта страница объясняет, что такое ::after, как работает обязательное свойство content, на что следует обратить внимание и в каких случаях его применение действительно оправдано.

Что такое ::after

::after позволяет прикреплять генерируемое содержимое — символы, строки текста, изображение или декоративную фигуру — к концу элемента без изменения HTML документа. Поскольку сгенерированный блок является частью элемента, его можно анимировать, позиционировать и обтекать, как любое обычное содержимое.

Два правила обязательны:

  • Свойство content является обязательным. Если опустить content, псевдоэлемент не будет создан. Используйте content: "" (пустую строку), когда нужен только декоративный блок, а не текст.
  • По умолчанию блок является строчным. Установите display: block (или inline-block), если нужно, чтобы работали ширина, высота или вертикальные отступы.

::after и :after

::after также можно записать с одним двоеточием: :after. Форма с двойным двоеточием — современный стандарт CSS3 для псевдоэлементов (чтобы отличать их от псевдоклассов вроде :hover); форма с одним двоеточием существует только для обратной совместимости со старыми браузерами. Предпочитайте ::after, если только вам не нужна поддержка устаревших движков, таких как Internet Explorer 8.

::after и ::before

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

Внимание

Генерируемое содержимое не является частью DOM: его нельзя выделить курсором, и большинство программ чтения с экрана его игнорируют (поддержка в браузерах непоследовательна). Используйте ::after исключительно для декоративного или вспомогательного содержимого — никогда не помещайте в content смысловую информацию, которую пользователь должен прочитать.

Информация

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

Версия

CSS Pseudo-Elements Level 4

Selectors Level 3

Синтаксис

CSS псевдоэлемент ::after

::after {
  css declarations;
}

Пример псевдоэлемента ::after:

Пример CSS ::after

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::after { 
        content: " - William Shakespeare.";
      }
    </style>
  </head>
  <body>
    <h2>::after selector example</h2>
    <p>"Be or not to be"</p>
  </body>
</html>
Попробуйте сами »

В следующем примере к содержимому можно добавить стили.

Пример псевдоэлемента ::after со стилизованным содержимым:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::after { 
        content: " - William Shakespeare.";
        background-color: #eee;
        color: #1c87c9;
        padding: 5px 3px;
        border: 2px dashed #000;
        margin-left: 5px;
      }
    </style>
  </head>
  <body>
    <h2>::after selector example</h2>
    <p>"Be or not to be"</p>
  </body>
</html>
Попробуйте сами »

Распространённые случаи применения

::after особенно полезен, когда нужно добавить визуальное содержимое без засорения разметки:

  • Декоративные фигуры и разделители. Блок, созданный из content: "" с border или background — подчёркивания, стрелки, ленты, хвостики подсказок.
  • Иконки после ссылок. Добавьте стрелку внешней ссылки или маркер типа файла после <a>.
  • Трюк clearfix. Заставьте родительский элемент охватывать плавающих дочерних.
/* External-link arrow after every link with target="_blank" */
a[target="_blank"]::after {
  content: " ↗";
}

/* Clearfix: make a container wrap its floated children */
.clearfix::after {
  content: "";
  display: block;   /* block + clear pushes the box below the floats */
  clear: both;
}

Обратите внимание на пустой content: "" в clearfix: он создаёт блок без видимого текста — именно то, что нужно для вспомогательного элемента, используемого только для управления раскладкой.

Советы и подводные камни

  • Нет content — нет элемента. Забытое свойство content — самая частая причина того, что правило ::after «ничего не делает».
  • Устанавливайте display для задания размеров. Строчный псевдоэлемент игнорирует width, height и вертикальные отступы. Используйте display: block или inline-block.
  • Аккуратность с кавычками. Внутри строк content экранируйте специальные символы кодовой точкой Unicode (например, content: "\00BB" для »), чтобы кодировка файла не могла их сломать.

Практика

Практика
Что делает псевдоэлемент ::after в CSS?
Что делает псевдоэлемент ::after в CSS?
Was this page helpful?