Pseudo-elements are introduced in the CSS to better manage styling of some of the elements or their parts that are not clearly defined inside the document tree.
Following pseudo-elements are on the disposal:
The first-line pseudo-element applies styles to the content of the first line of a paragraph. This selector can be attached only to block container element. The following properties apply to a :first-line pseudo-element: font properties, color property, background properties, word-spacing, letter-spacing, text-decoration, text-transform, and line-height although browser may apply other properties as well.
The first-letter pseudo-element applies styles to the content of the first letter of the first line of a block. To make it applicable it must be preceded by any other content, i.e. an image element. Usually this type of selector is used to emphasize the first letter in a paragraph which is a commonly applied effect in writing. These are the properties that apply to :first-letter pseudo-elements: font properties, text-decoration, text-transform, letter-spacing, word-spacing, line-height, float, vertical-align, margin properties, padding properties, border properties, color property, background properties and perhaps some other properties depending on the browser.
:before and :after pseudo-elements
A pseudo-element is generated as a fictional tag which is added to the sequence invisibly. Following example shows how that works:
CSS pseudo-elements example: