CSS Pseudo-Elements

Subject: css

CSS Pseudo-Elements

CSS Pseudo-Elements allow you to style specific parts of an element or inject content without modifying the HTML. They start with a double colon :: and are used to target sub-parts like the first letter, first line, or to insert content before/after an element.

Syntax

🚀 Try it in Compiler

Example: Styling with Pseudo-Elements

🚀 Try it in Compiler

Important Notes

  • ::before and ::after require the content property to work.
  • Pseudo-elements do not modify the actual HTML, they are purely visual.
  • ::first-letter and ::first-line work best with block-level elements like paragraphs.
  • Use ::selection to style text when a user highlights it.

Key Takeaways

  • Pseudo-elements let you style sub-parts of elements or insert content visually.
  • ::before and ::after are commonly used for decorative labels or effects.
  • ::first-letter and ::first-line enhance typographic design.
  • ::placeholder styles input hints; ::selection customizes highlight appearance.
  • Keep your HTML clean while extending styling flexibility with pseudo-elements.
Next: CSS Colors