✨ CSS Pseudo-elements

⚡ Quick Overview

CSS Pseudo-elements let you style specific parts of an element or inject virtual elements (::before, ::after) without changing the actual HTML.

Common pseudo-elements:

::before – Inserts content before the element.
::after – Inserts content after the element.
::first-letter – Styles the first letter of a block element.
::first-line – Styles only the first line of text.

? Key Concepts

Pseudo-elements behave like “virtual child elements” that you can style with CSS.
::before and ::after require the content property to be visible.
They are often used for icons, decorative elements, and advanced typography.
Modern CSS uses a double colon syntax :: for pseudo-elements.

? Syntax / Theory

The basic syntax for pseudo-elements is:

? View Code Example

/* Basic pseudo-element syntax */
selector::pseudo-element {
  property: value;
}

Example:

p::first-letter selects only the first character of a paragraph.
p::first-line selects only the first rendered line.
.btn::before can add an icon before a button label.

? Code Examples

? View Code Example

/* Style different parts of a paragraph using pseudo-elements */
p::first-letter {
  font-size: 200%;
  color: red;
}

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

p::before {
  content: "? ";
  color: green;
}

p::after {
  content: " ✔";
  color: blue;
}

Here is a full HTML + CSS example:

? View Code Example

<!-- HTML: one simple paragraph -->
<p class="highlighted-text">
  This is a sample paragraph where the first letter is styled,
  the first line is bold, and it shows icons before and after.
</p>

/* CSS: apply multiple pseudo-elements */
.highlighted-text::first-letter {
  font-size: 200%;
  color: red;
}

.highlighted-text::first-line {
  font-weight: bold;
}

.highlighted-text::before {
  content: "? ";
  color: green;
}

.highlighted-text::after {
  content: " ✔";
  color: blue;
}

? Live Output / Explanation

? Visual Idea (Simulated)

The result looks similar to this:

? This is a sample paragraph where the first letter is red and enlarged, the first line is bold, and it ends with a blue check mark ✔

The green arrow (::before) appears before the text.
The first letter “T” is larger and red (::first-letter).
The first line of the paragraph is bold (::first-line).
The blue check mark at the end comes from ::after.

? Common Use Cases

Decorative bullets, arrows, and icons without extra HTML tags.
Drop caps and stylized first lines in articles and blogs.
Badges, ribbons, or labels on cards and buttons.
Custom underlines and highlights using ::before/::after with absolute positioning.

? Tips & Best Practices

Use ::before and ::after to add decorative content or icons without modifying the HTML.
Combine ::first-letter with drop cap styling for elegant article or blog intros.
Remember: content is required for ::before and ::after to display.
Test pseudo-elements across different browsers for complex layouts and animations.
Use pseudo-elements for non-essential decoration; important text should still exist in the real DOM for accessibility.

? Try It Yourself

Create a paragraph and style the first letter using ::first-letter to look like a “drop cap” in magazines.
Use ::before and ::after to add custom symbols or emojis around a heading (for example, ⭐ <h2> ⭐).
Write a long paragraph and style only its first line using ::first-line; adjust width and font size to see how the first line changes.
Build a custom button that uses ::before for an icon and ::after for a badge (like “NEW”).