Pseudo Element

Just like pseudo-classes, pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain parts of a document. For example, the ::first-line pseudo-element targets only the first line of an element specified by the selector. [Source: Mozilla Developer Network]

But I have use ::before ::after pseudo class lot of area. Its helps me a lot for styling any element. It reduce my time.
You can see some example clicking the link belew at fiddle:
1. Using small border at header type content
2. Using animation in a button

[to be continued]