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.
✨ Ask Lara — your AI study partner
Unlock personalized learning support. Lara can explain lessons, summarize topics, and answer your study questions — available from the Go plan and above.
Lara helps you learn faster — exclusive to ReadyTools Go, Plus, and Max members.
