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.
::first-line Pseudo-element
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.
Note: The CSS properties that can be applied to the ::first-line pseudo-element are: font properties, background properties, color, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height.
::first-letter Pseudo-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.
::after Pseudo-element
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.
We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.Ok