W3docs
ru
Войти

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

Use the ::after CSS pseudo-element for adding elements after the content. Read about the pseudo-element and try examples.

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

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

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

Его можно анимировать, позиционировать или обтекать, как и любой другой контент.

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

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

info

Псевдоэлементы, создаваемые с помощью ::after и ::before, не применяются к заменённым элементам (например, <br>, <img>).

Версия

Псевдоэлементы CSS Level 4

Селекторы 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 со стилизованным контентом:

Пример псевдоэлемента ::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 в CSS?