CSS Pseudo-elements

Pseudo-elements allow us to target specific parts of an element, such as the first letter or the first line. They can also add extra content to the page without modifying the HTML structure.

What is a Pseudo-element?

Pseudo-elements are denoted with a double colon (::), and they target parts that are not separate HTML elements. Examples include ::before, ::after, ::first-line, and ::selection.

Pseudo-element	Description
::before	Inserts content before the element.
::after	Inserts content after the element.
::first-line	Styles the first line of the element.
::first-letter	Styles the first letter of the element.
::selection	Styles the selected text.

Styling Text with Pseudo-elements

With pseudo-elements, you can add unique styling to text, for example highlighting the first letter or first line of paragraphs.

In the following example, the first line of a paragraph is bold and blue, while the first letter is larger and red.

Adding Extra Content

With ::before and ::after pseudo-elements, you can add content to the page without modifying the HTML. This is useful for icons, decorations, or additional text.

Tips for Using Pseudo-elements

Pseudo-elements can greatly enrich design and improve user experience. Here are some tips:

Always provide a 'content' value when using ::before and ::after, otherwise they will not appear.
Use them for decoration or additional information, but not for main content.
Make sure pseudo-element styling does not interfere with the readability of main content.