Поговорим про разницу псевдо-элементов с двумя ::before и с одним :before двоеточием. Что использовать правильнее?
Технически, правильны ответ — «с двумя» — ::before. Но это не значит, что нужно всегда делать именно так.
Ситуация следующая:
- два двоеточия предшествуют псевдо-элементу,
- одно двоеточие предшествует псевдо-селектору.
::before это однозначно псевдо-ЭЛЕМЕНТ, так что нужно использовать два двоеточия.
Разница между псевдо-классом и псевдо-элементом может ввести вас в ступор, но, к счастью чем отличаются ::after и ::before понять проще. Это буквально те элементы (или ноды, в терминах DOM-дерева браузера), которые добавляются в первым и последним, соответственно, в выбранный элемент.
::first-letter это также псевдо-элемент, но как бы отдельным элементом, в отличие от ::after и ::before он не является. Вокруг него нет <span> или другого подобного элемента. Просто выбирается первая буква и на нее вешаются стили. Она как бы становится отдельным элементом. Как ни странно, но это так.
То есть псевдо-элемент, это именно отдельный создаваемый элемент, хотя есть и странность, притянутая за уши, как описано выше.
А вот псевдо-селекторы выбирают ТО, ЧТО УЖЕ СУЩЕСТВУЕТ. Например, :nth-child(2) или :hover.
Ну тогда выходит что ::before это псевдо-элемент и перед ним нужно ставить двойное двоеточие, разве не так?
Однако вот аргументы для использования :before(с одним двоеточием):
- Internet Explorer 8 и ниже поддерживает
:before, но не::before - Все современные браузеры поддерживают оба способа записи, в целях обратной совместимости.
- Надо писать на одно двоеточие меньше =)
Я слышал от некоторых людей жалобы, что линтеры не пропускают два двоеточия или автоматом переводят их в одно. Ну и отлично. Если нет разницы, то зачем писать на один символ больше? И вообще, хорошо когда все пишут код единообразно.
Но все же есть аргументы и за ::before:
- Псевдо-элемент с одним двоеточием, с точки зрения стандарта это ошибка.
- Такая «символьная» разница между псевдо-элементами и псевдо-селекторами может помочь лучше структурировать информацию в голове (прим.пер.: спорно).
В общем, если вы «правильный», как автор этой статьи и переводчик, то пишите два двоеточия для псевдо-элементов. И настройте на это свои линтеры.