В чем разница между: before и :: before?

Question

Я только что увидел код CSS, включающий тег ::before. Я посмотрел на MDN , чтобы увидеть, что такое ::before, но я действительно не понял этого.

Может кто-нибудь объяснить, как это работает?

Делает ли он элемент DOM перед тем, что мы выбираем с помощью CSS?

Answer 1

Согласно этим документам они эквивалентны:

element:before  { style properties }  /* CSS2 syntax */

element::before { style properties }  /* CSS3 syntax */

Единственное отличие состоит в том, что в CSS3 используется двойное двоеточие, тогда как одиночное двоеточие является устаревшей версией.

Рассуждение:

Нотация :: before была введена в CSS 3 для установления различение псевдоклассов и псевдоэлементов. Браузеры также принять обозначение: до того, как введено в CSS 2.

Answer 2

Это отличает псевдоэлементы от псевдо-классов.

Разница между псевдо-классами и псевдоэлементами описана в http://www.d.umn.edu/~lcarlson/csswork/selectors/pseudo_dif.html

Answer 3

По сути, они означают одно и то же. :: был введен в CSS3 для облегчения разграничения между псевдоэлементами (такими как: before и: after) и псевдоклассами (такими как: link и: hover).

Answer 4

Я проверил MDN и w3.org , и лучшее, что я мог придумать, это то, что :: используется для структурных изменений, и : используется для стайлинга .

В настоящее время они являются взаимозаменяемыми по причинам совместимости.

Похоже, что он отделяет :link (например), который стилизует <a>, от :before (который является структурным изменением).

: для укладки, :: для структурирования.

Answer 5

Один - это CSS2 (: before), а другой - CSS3 (:: before). В настоящее время они взаимозаменяемы в браузерах, которые поддерживают CSS2 и CSS3.

Вот хорошее объяснение: http://www.impressivewebs.com/before-after-css3/