::after¶

Псевдо-элемент ::after соответствует виртуальному последнему дочернему элементу выбранного элемента.

Он обычно используется для добавления косметического контента к элементу с использованием свойства CSS содержимого. По умолчанию этот элемент inline.

Псевдо-элементы

::after
::backdrop
::before
::cue
::first-letter
::first-line
::grammar-error
::marker
::part()
::placeholder
::selection
::slotted()
::spelling-error

Синтаксис¶

/* Синтаксис CSS2 */
element:after {
  /* свойства */
}

/* Синтаксис CSS3 */
element::after {
  /* свойства */
}

Спецификации¶

Поддержка браузерами¶

Can I Use css-gencontent? Data on support for the css-gencontent feature across the major browsers from caniuse.com.

Примеры¶

Пример 1¶

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>after</title>
    <style>
      p.new::after {
        content: 'Новьё!'; /* Добавляемый текст */
        color: #333; /* Цвет текста */
        background-color: #fc0; /* Цвет фона */
        font-size: 90%; /* Размер шрифта */
        padding: 2px; /* Поля вокруг текста */
      }
    </style>
  </head>
  <body>
    <h2>Истории</h2>
    <p class="new">
      История о том, как необходимо было сделать могилу, ее
      начали копать, а потом закапывать, и что из этого
      получилось.
    </p>
    <p>
      История о том, как возле столовой появились загадочные
      розовые следы с шестью пальцами, и почему это
      случилось.
    </p>
  </body>
</html>

В примере в конце текстового абзаца, помеченного классом new, выводится текст для привлечения внимания. Результат примера:

Результат использования псевдоэлемента ::after

Пример 2¶

HTML

<p>
  Here is the live example of the above code.<br />
  We have some
  <span data-descr="collection of words and punctuation">text</span> here with a
  few
  <span data-descr="small popups which also hide again">tooltips</span>.<br />
  Don't be shy, hover over to take a
  <span data-descr="not to be taken literally">look</span>.
</p>

CSS

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

span[data-descr]:hover::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;
}

См. также¶

Псевдо-элемент ::before
Свойство content

Ссылки¶

Псевдо-элемент ::after ^{MDN (рус.)}