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

Вопрос по псевдо классам. Допустим, есть у меня есть такие ссылки:

a{
text-decoration: none;
color: black;
}

.link1, .link2 {
transition: all .3s;
}

.link1:hover{
color: #ff9900;
}

.link2::hover{
color: #66ff00;
}
<a class = "link1">Ссылка с классом 1</a>
<a class = "link2">Ссылка с классом 2</a>

У меня в google chrome корректно работает и тот и тот вариант. В здешней консоли почему-то работает только с одним двоеточием, в разных обучающих роликах псевдоклассы пишут то так, то так. В чем разница между тэг::псевдокласс и тэг:псевдокласс? Правильно писать одно двоеточие или два? Или эти записи вообще обозначают что-то разное?


Ответы (1 шт):

Автор решения: entithat

Изначально всегда использовали : до версии CSS3, где начали разделять:

  • : используется для псевдо-классов (:hover, :active...)
  • :: используется для псевдо-элементов (::before, ::after...)

Если мы будем писать везде с : (к примеру с псевдо-элементом :before) и когда-то будет реализован псевдо-класс :before (что-либо не значащий), то может случиться что-то непредвиденное (что навряд случится).

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

P.S. Использование :: в старых браузерах может что-то сломать.

→ Ссылка