CSS Pseudo-elements: Syntax, Usage, and Examples

CSS pseudo-elements allow developers to style specific parts of an element without modifying the HTML structure. These selectors enhance visual effects and dynamic content creation by targeting elements like the first letter of a paragraph or inserting content before or after an element.

How to Use CSS Pseudo-elements

Pseudo-elements appear with a double colon (::) before the element name. The syntax follows this structure:

selector::pseudo-element {
  property: value;
}

For example, the ::before pseudo-element inserts content before an element:

h1::before {
  content: "🔥 ";
}

This places a fire emoji before every <h1> element.

Common CSS Pseudo-elements

• ::before – Inserts content before an element.
• ::after – Inserts content after an element.
• ::first-letter – Targets the first letter of a text block.
• ::first-line – Applies styles to the first line of a block.
• ::selection – Styles text when the user selects it.
• ::backdrop – Styles the background of fullscreen elements.

When to Use CSS Pseudo-elements

Adding Decorative Content

Pseudo-elements make it easy to add icons, text, or symbols without modifying the HTML.

button::after {
  content: " ➜";
}

Every button label includes an arrow after it.

Styling Specific Text Portions

The ::first-letter and ::first-line pseudo-elements enhance typography.

p::first-letter {
  font-size: 2em;
  font-weight: bold;
}

The first letter of every paragraph appears larger and bold.

Customizing User Selection

The ::selection pseudo-element modifies the appearance of highlighted text.

::selection {
  background-color: yellow;
  color: black;
}

The background of selected text changes to yellow instead of the default blue.

Examples of CSS Pseudo-elements in Action

Example 1: Styling List Bullets

li::before {
  content: "✅ ";
}

Each list item receives a checkmark before it.

Example 2: Creating Tooltip Effects

.tooltip::after {
  content: attr(data-tooltip);
  background: black;
  color: white;
  padding: 5px;
  position: absolute;
  display: none;
}
.tooltip:hover::after {
  display: block;
}

When the user hovers over a .tooltip element, a tooltip appears using the data-tooltip attribute value.

Example 3: Animating Pseudo-elements

button::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: blue;
  transition: width 0.3s;
}
button:hover::after {
  width: 0;
}

When the user hovers over the button, the underline shrinks.

Learn More About CSS Pseudo-elements

Using ::before and ::after for Content

Pseudo-elements ::before and ::after dynamically add visual elements.

a::before {
  content: "🔗 ";
}

Every hyperlink displays a chain icon before it.

Styling the Fullscreen Background with ::backdrop

The ::backdrop pseudo-element customizes the background of elements in fullscreen mode.

::backdrop {
  background-color: rgba(0, 0, 0, 0.7);
}

When an element enters fullscreen, the background darkens.

Animating Pseudo-elements

Pseudo-elements integrate with animations for creative effects.

h1::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background: red;
  animation: blink 1s infinite;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}

A small red square blinks before every <h1>.

CSS pseudo-elements offer a powerful way to style specific parts of elements without additional HTML markup. By using ::before, ::after, ::first-letter, and ::selection, you can create visually engaging layouts with minimal code.