Перейти к содержанию

::after

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

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

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

Синтаксис

1
2
3
4
5
6
7
8
9
/* Синтаксис CSS2 */
element:after {
  /* свойства */
}

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

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

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

Примеры

Пример 1

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!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

1
2
3
4
5
6
7
8
9
<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>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
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;
}

См. также

Ссылки

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

Комментарии