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

Псевдоэлемент ::after - это элемент сформированного контента, который добавляет содержимое любого вида после контента.

Значение определяется с помощью свойства content.

По умолчанию псевдоэлемент ::after становится строчным.

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

Он может быть анимирован, позиционирован и выровнен подобно другим контентам.

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

Версия

CSS2

Синтаксис

::after {
css declarations;
}

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p::after { 
      content: " - William Shakespeare.";
      }
    </style>
  </head>
  <body>
    <h2>Пример селектора ::after</h2>
    <p>"Be or not to be"</p>
  </body>
</html>

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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</h2>
    <p>"Be or not to be"</p>
  </body>
</html>

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

chrome edge firefox safari opera
4.0+ 12.0+ 2.0+ 3.1+ 10.0+

Практикуйте свои знания

Как используется CSS псевдоэлемент ::after?
Считаете ли это полезным?