Did you know that there is a difference between pseudo elements and pseudo classes and that they actually should be written differently?

Pseudo classes refer to the state of the selected element, like :hover , :focus or :last-child .

For example:

p:last-child { margin-bottom: 0; }

Pseudo elements on the other hand are actual elements, that get somehow created by CSS. The newest Chrome Dev Tools are making a good job in demonstrating that with actually showing them in the code. To make the difference clear pseudo elements are since CSS3 notated with two colons.

blockqoute::before { content: 'â€œ'; } blockqoute::after { content: 'â€'; }

(Be aware, if you need to support IE8 you have to write it in the wrong single-colon CSS 2.1 syntax with only one colon.)

You can read more on pseudo elements at the W3.