What are pseudo-elements in CSS?

QuestionsQuestions8 SkillsProBorder with Top TriangleSep, 11 2025
094

Pseudo-elements in CSS are used to style specific parts of an element without needing to add additional classes or IDs in the HTML. They allow you to apply styles to a portion of an element's content or to create effects that are not directly part of the document structure.

Common pseudo-elements include:

  1. ::before - Inserts content before the content of an element.
  2. ::after - Inserts content after the content of an element.
  3. ::first-line - Styles the first line of a block-level element.
  4. ::first-letter - Styles the first letter of a block-level element.

Example:

p::first-line {
    font-weight: bold;
    color: blue;
}

p::before {
    content: "Note: ";
    font-style: italic;
}

In this example, the first line of each paragraph will be bold and blue, and "Note: " will be added before the paragraph content.

0 Comments

no data
Be the first to share your comment!