Про разницу псевдо-элементов с двумя и одним двоеточием

Поговорим про разницу псевдо-элементов с двумя ::before и с одним :before двоеточием. Что использовать правильнее?

Технически, правильны ответ — «с двумя» — ::before. Но это не значит, что нужно всегда делать именно так.

Ситуация следующая:

  • два двоеточия предшествуют псевдо-элементу,
  • одно двоеточие предшествует псевдо-селектору.

::before это однозначно псевдо-ЭЛЕМЕНТ, так что нужно использовать два двоеточия.

Разница между псевдо-классом и псевдо-элементом может ввести вас в ступор, но, к счастью чем отличаются ::after и ::before понять проще. Это буквально те элементы (или ноды, в терминах DOM-дерева браузера), которые добавляются в первым и последним, соответственно, в выбранный элемент.

::first-letter это также псевдо-элемент, но как бы отдельным элементом, в отличие от ::after и ::before он не является. Вокруг него нет <span> или другого подобного элемента. Просто выбирается первая буква и на нее вешаются стили. Она как бы становится отдельным элементом. Как ни странно, но это так.

То есть псевдо-элемент, это именно отдельный создаваемый элемент, хотя есть и странность, притянутая за уши, как описано выше.

А вот псевдо-селекторы выбирают ТО, ЧТО УЖЕ СУЩЕСТВУЕТ. Например, :nth-child(2) или  :hover.

Ну тогда выходит что ::before это псевдо-элемент и перед ним нужно ставить двойное двоеточие, разве не так?

Однако вот аргументы для использования :before(с одним двоеточием):

  1. Internet Explorer 8 и ниже поддерживает :before, но не ::before
  2. Все современные браузеры поддерживают оба способа записи, в целях обратной совместимости.
  3. Надо писать на одно двоеточие меньше =)

Я слышал от некоторых людей жалобы, что линтеры не пропускают два двоеточия или автоматом переводят их в одно. Ну и отлично. Если нет разницы, то зачем писать на один символ больше? И вообще, хорошо когда все пишут код единообразно.

Но все же есть аргументы и за ::before:

  1. Псевдо-элемент с одним двоеточием, с точки зрения стандарта это ошибка.
  2. Такая «символьная» разница между псевдо-элементами и псевдо-селекторами может помочь лучше структурировать информацию в голове (прим.пер.: спорно).

В общем, если вы «правильный», как автор этой статьи и переводчик, то пишите два двоеточия для псевдо-элементов. И настройте на это свои линтеры.