Pseudo Classes

In CSS, there are certain selectors you can use that act like you've injected new HTML into the page and have the flexibility to style those new imaginary elements. These are known as pseudo-elements.

Pseudo-elements can only be applied to the last "simple selector in a chain", as the recommendation says. A simple selector is either the univeral selector (*) or a type selector (I tend to call them element selectors) followed by attribute, ID or pseudo-class selectors.

The Syntax
The syntax for pseudo elements is a bit different than that of regular CSS, but it's real close.
selector:pseudo-element {property: value}
As you can see the only difference is that you place the pseudo element after the selector, and divide the 2 with a (:) colon.

There are a number of common typographical layout techniques (such as drop-cap letters, or special text formatting applied to the first line or letter of text in a paragraph) that, while commonplace in print media, are not easy to reproduce using standard HTML. These do not conform to the idea of typical structural elements contained in a Web page, but are better thought of as pure typographical layout formatting features. CSS enables the Web author to accomplish this using the pseudo-elements

The list of Pseudo element and classes

1. anchor
2. first-line
3. first-letter
4. lang
5. left, right & first
6. focus and hover
7. first-child