:: до / :: после - CSS-хитрости

Псевдоэлементы ::beforeи ::afterв CSS позволяют вставлять контент на страницу без необходимости его размещения в HTML. Хотя конечный результат на самом деле отсутствует в DOM, он отображается на странице так, как если бы он был, и, по сути, был бы таким:

div::before ( content: "before"; ) div::after ( content: "after"; )

 before after

Единственные причины использовать одно вместо другого:

Вы хотите, чтобы сгенерированный контент располагался перед содержимым элемента позиционно.
::afterСодержание также «после» в источнике порядка, поэтому он поместит на вершине :: раньше , если сложены друг на друга , естественно.

Обратите внимание, что содержимое все еще находится внутри элемента, к которому они применяются. Такое ощущение, что они могут идти до или после элемента, но на самом деле это до или после другого содержимого внутри.

Ценность содержания может быть:

Строка: content: "a string"; - специальные символы должны быть специально закодированы как объект Unicode. См. Страницу с глифами.
Изображение: контент: url (/path/to/image.jpg.webp); - Изображение вставлено с точными размерами и не может быть изменено. Поскольку такие вещи, как градиенты, на самом деле являются изображениями, псевдоэлемент может быть градиентом.
Ничего: content: «»; - Полезно для clearfix и вставки изображений в качестве фоновых изображений (установка ширины и высоты и даже возможность изменения размера с помощью background-size).
Счетчик: content: counter(li); - Действительно полезно для стилизации списков, пока не появится маркер.

Обратите внимание, что вы не можете вставлять HTML (по крайней мере, он будет отображаться как HTML). content: "";

: против ::

Каждый браузер, поддерживающий синтаксис с двойным двоеточием (: :) CSS3, также поддерживает только синтаксис (:), но IE 8 поддерживает только одинарное двоеточие, поэтому на данный момент рекомендуется просто использовать одинарное двоеточие для лучшей поддержки браузером.

:: - это новый формат, предназначенный для различения псевдоконтента от псевдоселекторов. Если вам не нужна поддержка IE 8, используйте двойное двоеточие.

Связанный

::первая линия
::первое письмо
Селекторы псевдоклассов

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

Небольшие проблемы:

Firefox 3.5 - не допускает абсолютного позиционирования псевдоэлементов.
В Opera 9.2 пробелы всегда отображаются внутри этого псевдоэлемента, как будто это preтекст.
IE 8 не поддерживает на них z-index