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

Псевдоэлемент — часть элемента, которой нет в разметке отдельным тегом: первая буква абзаца, маркер списка, текст-подсказка в поле. CSS позволяет оформить такую часть и даже создать новую. Псевдоэлементы пишут после селектора через двойное двоеточие ::.

before и after

::before и ::after добавляют содержимое в начало и в конец элемента. Что именно добавить, задаёт свойство content:

<style>
  .price::before {
    content: "$";
  }
</style>
 
<p class="price">25</p>

В разметке написано только число, а знак доллара добавил CSS. Такой текст нельзя выделить мышью и скопировать, поэтому в content кладут только оформление, а не важную информацию.

Значки и пометки

Через content удобно добавлять повторяющиеся значки — например, стрелку к ссылкам, которые ведут на другой сайт:

<style>
  a[target="_blank"]::after {
    content: " ↗";
  }
  .required::after {
    content: " *";
    color: crimson;
  }
</style>
 
<p><a href="#" target="_blank">Внешняя ссылка</a></p>
<p class="required">Обязательное поле</p>

Значок появляется сам у каждого подходящего элемента — не нужно вписывать его в разметку вручную.

Декоративные фигуры

Если content пустой (content: ""), псевдоэлемент можно превратить в фигуру: задать размер, фон и скругление. Чтобы размеры работали, ему дают display: inline-block или block:

<style>
  .status::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border-radius: 50%;
    background: limegreen;
  }
</style>
 
<p class="status">В сети</p>

Первая буква и первая строка

::first-letter оформляет первую букву, ::first-line — первую строку текста. Так делают буквицу, как в книгах:

<style>
  .story::first-letter {
    font-size: 2.5em;
    font-weight: 700;
    color: firebrick;
  }
</style>
 
<p class="story">Давным-давно в одном маленьком городе жил программист, который очень любил красивую вёрстку.</p>

Маркеры, подсказки и выделение

::marker оформляет маркер пункта списка, ::placeholder — подсказку в пустом поле, ::selection — текст, выделенный мышью:

<style>
  li::marker { color: tomato; }
  input::placeholder { color: teal; font-style: italic; }
  p::selection { background: gold; }
</style>
 
<ul><li>Пункт списка</li></ul>
<input placeholder="Подсказка в поле">
<p>Выделите этот текст мышью.</p>

Частая ошибка

Без свойства content псевдоэлементы ::before и ::after не появляются вовсе, даже с размером и фоном:

<style>
  .a::before, .b::before {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 6px;
    background: crimson;
  }
  .b::before { content: ""; }
</style>
 
<p class="a">Без content — квадрата нет</p>
<p class="b">С content: "" — квадрат есть</p>

Даже для пустой фигуры нужно написать content: "".