The pseudo-elements allow you to style the elements or parts of the elements without adding any IDs or classes to them.
It will be really helpful in the situations when you just want to style the first letter of a paragraph to create the drop cap effect or to insert some content before or after an element, etc. only through the style sheet.
The ::first-line pseudo-element applies a special style to the first line of a text.
The style rules in the following example format the first line of text in a paragraph. The length of the first line depends on the size of the browser window or the containing element.
The ::first-letter pseudo-element applies a special style to the first letter of the first line of a text.
The style rules in the following example format the first letter of the paragraph of text and create the effect like drop cap.
Note: The CSS properties that can be applied to the ::first-letter pseudo-element are: font properties, text-decoration, text-transform, letter-spacing, word-spacing, line-height, float, vertical-align (only if ‘float’ is ‘none’), color, margin and padding properties, border properties, background properties.
The ::after pseudo-elements can be used to insert some content after an element’s content. The below example inserts an image after the content of each <p> element.
The ::before pseudo-elements can be used to insert some content before an element’s content. The below example inserts an image before the content of each <p> element.
The ::selection pseudo-element changes the style of the portion of an element that is selected by a user.
You can change the color, background-color, cursor, and outline property of the selected portion.
Pseudo-elements and CSS Classes
If you want to style certain paragraphs of text or other block-level elements then use pseudo-elements with a CSS class.