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>