Why are there two colons here? span::before

It's a pseudo-element, as defined by the CSS Selectors Level 3 spec:

The ::before and ::after pseudo-elements can be used to describe generated content before or after an element's content.

It is effectively the same as the single-colon syntax defined by the level 2 spec. The level 3 spec introduces an extra colon to differentiate between pseudo-elements and pseudo-classes (which use a single colon).

Both syntaxes will work in newer browsers, but older browsers will not recognise the newer :: style.

---

For even more detail, you can look at the grammar from the level 3 spec, which states:

'::' starts a pseudo-element, ':' a pseudo-class

You can read an article about it here

But basically it is to differentiate between pseudo classes and pseudo elements. It is a css3 standard to use two colon's for a pseudo element, as oppose to the CSS2 standard of just one.

One or two colons will work as browsers want to cater to both CSS2 and CSS3