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:

:first-line pseudo-element

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.

:first-letter pseudo-element

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

:before and :after pseudo-elements are used to insert some content before or after an element's content.

A pseudo-element is generated as a fictional tag which is added to the sequence invisibly. Following example shows how that works:

Pseudo elements diagram

 

 

 

 

 

 

 

 

 

 

 

Example

CSS pseudo-elements example:

 

›› go to examples ››