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

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

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

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

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>after</title>
  <style>
    li::before {
     content: "♦ "; /* Желаемый символ перед списком */ 
   }
   li {
     list-style: none; /* Убираем дефолтные маркеры */ 
   }
  </style>
 </head>
 <body>
  <h2>Планшеты</h2>
  <ul>
  <li>Teclast X3 Pro</li>
  <li>Lark Evolution X4 101</li>
  <li>Irbis TZ84</li>
 </body>
</html>

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