CSS pseudo-elements are used to add special effects to some selectors.
The syntax of pseudo-elements:
CSS classes can also be used with pseudo-elements:
The "first-line" pseudo-element is used to add a special style to the first line of a text.
In the following example the browser formats the first line of text in a p element according to the style in the "first-line" pseudo-element (where the browser breaks the line, depends on the size of the browser window):
Note: The "first-line" pseudo-element can only be used with block-level elements.
Note: The Below properties apply to the "first-line" pseudo-element:
The "first-letter" pseudo-element is used to add a special style to the first letter of a text:
Note: The "first-letter" pseudo-element can only be used with block-level elements.
Note: The Below properties apply to the "first-letter" pseudo- element:
Pseudo-elements can be combined with CSS classes:
The example above will display the first letter of all paragraphs with class="article", in red.
Several pseudo-elements can also be combined.
In the following example, the first letter of a paragraph will be red, in an xx-large font size. The rest of the first line will be blue, and in small-caps. The rest of the paragraph will be the default font size and color:
The ":before" pseudo-element can be used to insert some content before the content of an element.
The Below example inserts an image before each <h1> element:
The ":after" pseudo-element can be used to insert some content after the content of an element.
The Below example inserts an image after each <h1> element:
The "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).
Your Query was successfully sent!
