Почему у одних псевдоэлементов одно двоеточие :before, а у других два ::before?
По новой спеке правильно писать два. но не все старые браузеры понимают новую спеку, поэтому для кроссбраузерности пишут одно.
Потому что два двоеточия — это псевдоэлемент, а одно — псевдокласс (как :hover). 
Псевдоэлементы появились только в CSS3, поэтому браузеры принимают и одно, как в CSS2. Источник.
P.S. Если не надо поддерживать IE8, то давно можно писать ::, см. caniuse