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

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

Настольные Мобильные

Псевдоэлемент ::after работает совместно со свойством content. Для ::after справедливо следующее:

При добавлении ::after к блочному элементу, значение свойства display может быть только: block или inline, none, marker. Все остальные значения будут трактоваться как block.
При добавлении псевдоэлемента ::after к строчному элементу, свойство display ограничено значениями inline и none. Все остальные будут восприниматься как inline.
::after наследует стиль от html элемента, к которому он добавляется.

Правила написания CSS-псевдоэлемента ::after

Селектор:after { ... } /* CSS 2.1 */

Селектор::after { ... } /* CSS 3 */

Начиная с CSS3 псевдоэлементы обозначаются двумя двоеточиями, чтобы отличать их от псевдоклассов.

Пример применения псевдоэлемента ::after

Проиллюстрируем работу псевдоэлемента ::after на примере списка с планшетами. Наша задача выделить новинки. Вот как это можно сделать:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Псевдоэлемент ::after</title>
  <style>
    .new::after {
      content: "Новинка"; /* Добавляемый текст */ 
      color: red; /* Цвет текста */ 
      font: 70%/normal arial; /* Параметры шрифта */
      top: -5px; /* Позиционирование */
      left:3px;
      position: relative;
    }
  </style>
 </head>
 <body>
  <h2>Планшеты</h2>
  <ul>
  <li class="new">Teclast X3 Pro</li>
  <li>Lark Evolution X4 101</li>
  <li>Irbis TZ84</li>
  </ul>
 </body>
</html>

Применение псевдоэлемента ::after