Styling the Unseen: CSS Pseudo-Elements

Go beyond basic selectors and learn to style virtual parts of your elements for incredibly detailed and clean web design.

Lesson ProgressStep 1 of 8

This is a paragraph of text. You can style its virtual parts.

⭐ 0 EXP

Welcome! We're about to explore CSS Pseudo-Elements. These are 'virtual' elements you can style without adding more HTML.

/* This is our demo paragraph */
p {
  font-family: serif;
  font-size: 1.5rem;
  max-width: 400px;
}

Generating Content: `::before` and `::after`

The `::before` and `::after` pseudo-elements are the most common. They insert a "virtual" child element just **before** or **after** the content of the selected element.

Their single most important property is content. If you don't declare this property, the pseudo-element will not be rendered, even if it's just content: "".

.quote::before {
  content: '“'; /* Inserts a quote */
  font-weight: bold;
}

.clearfix::after {
  content: ''; /* Used as a styling hook */
  display: block;
  clear: both;
}

System Check

Which CSS property is mandatory for `::before` and `::after` to render?

displaypositioncontentcolor

Advanced Holo-Simulations

⭐ 0 EXP

Achievements

🧪

CSS Alchemist

Successfully use `::before` or `::after` with a `content` property.

✒️

Typographic Detailer

Correctly style the `::first-letter` of an element.

🎨

UX Tuner

Customize the user experience with `::selection` or `::placeholder`.

Mission: Decorate with Content

Use CSS to add decorative content. Add a '★' (star) **before** all `h2` elements and '...' (ellipsis) **after** all `p` elements.

A.D.A. Feedback:

> System integrity looks stable. Code is valid.

Challenge: Match the Pseudo-Element

Drag the pseudo-elements on the left to match their correct description on the right.

::placeholder

::selection

::marker

Styles the part of a document that has been highlighted by the user.

Styles the placeholder text in an `<input>` or `<textarea>`.

Styles the bullet point or number of a list item.

Challenge: Complete the Syntax

Fill in the missing parts to create a CSS rule for a 'drop cap' on a paragraph.

{font-size:;float: left;}

Consult A.D.A.

Community Holo-Net

Recent Forum Posts

Why can't I add ::before to my <img> tag?

Posted by: El_Reemplazado

Cool tooltip trick with `attr()` and ::after

Posted by: CSS_Wizard

Peer Project Review

Submit your "Styled Document" project for feedback from other Net-Runners.

Support Us

The Unseen Power: A Deep Dive into CSS Pseudo-Elements

CSS Pseudo-Elements are keywords added to a selector that let you style a specific part of the selected element(s). They are like "virtual" elements that don't exist in the HTML markup, giving you incredible styling power without cluttering your code.

`:` vs. `::`: The Colon Conundrum

You might see pseudo-elements written with a single colon (:before) or a double colon (::before). The double-colon `::` syntax was introduced in CSS3 to distinguish **pseudo-elements** (which style a *part* of an element) from **pseudo-classes** (which style an element in a specific *state*, like:hover).

While browsers still accept the single-colon syntax for older pseudo-elements for backward compatibility, **it is best practice to always use the `::` syntax** for all pseudo-elements.

1. Generating Content: `::before` and `::after`

These are the most powerful and common pseudo-elements. They create a virtual first-child (`::before`) or last-child (`::after`) of the selected element. Their most critical requirement is the `content` property. Without it, they simply won't render.

Decorative Content: The simplest use is adding text, like quotation marks or icons.
Styling Hooks: Often, developers use content: "" to create an empty, styleable box. This is perfect for creating custom underlines, overlays, or shapes without extra `div` tags.

Advanced `content` Tricks: `attr()` and `counter()`

The `content` property isn't limited to static strings.

`attr()`: This function pulls the value from one of the element's HTML attributes. It's famously used to create simple tooltips by pulling from a `data-tooltip` attribute.
`counter()`: CSS counters allow you to number elements dynamically. You use counter-reset on a parent and counter-increment on the element. Then, `::before` can display the number using content: counter(section) ".".

Important Limitation: Replaced Elements

`::before` and `::after` **do not work** on replaced elements. These are elements whose content is not generated by CSS, such as `<img>`, `<input>`, or `<video>`. You cannot add a `::before` pseudo-element to an `<img>` tag.

2. Typographic Styling: `::first-letter` and `::first-line`

These pseudo-elements give you fine-grained control over typography.

`::first-letter`: Styles the first letter of a block-level element. This is the classic way to create a "drop cap". Only a subset of CSS properties (like `font`, `color`, `background`, `float`, `padding`) can be used.
`::first-line`: Styles the first line of text in a block-level element. The browser dynamically determines what the "first line" is, so it reflows as the viewport or font size changes.

3. User-Interface Pseudo-Elements

This group allows you to style parts of the browser's UI and user interactions.

`::selection`: Styles the portion of a document that the user highlights. You are limited to only `color`, `background-color`, and `text-shadow`.
`::placeholder`: Styles the placeholder text in an `<input>` or `<textarea>`. This is fantastic for branding forms.
`::marker`: Styles the bullet point or number of a list item (`<li>`). You can change its `color`, `font-size`, or even its `content` (e.g., `content: "✓ "`).
`::file-selector-button`: Targets the "Choose File" button in an `<input type="file">`, allowing you to style it like any other button.
`::backdrop`: Targets the full-screen background that displays behind elements in Fullscreen mode or a modal `<dialog>` element.

Key Takeaway: Pseudo-elements are your secret weapon for clean HTML and sophisticated CSS. Use them to add decorative elements, style typographic details, and customize the browser's UI, all without adding a single extra tag to your markup.

CSS Pseudo-Elements Glossary

Pseudo-Element: A CSS keyword that lets you style a specific part of a selected element, such as its first line, first letter, or generated content. Denoted by a double colon (`::`).
`::before`: Creates a pseudo-element that is the first child of the selected element. It is in-line by default and requires the `content` property to be rendered.
`::after`: Creates a pseudo-element that is the last child of the selected element. It is in-line by default and requires the `content` property to be rendered.
`content`: A CSS property used with `::before` and `::after` to generate content. Its value can be a string, an `attr()` function, a `counter()`, or even an image (`url()`).
`::first-letter`: Applies styles to the first letter of the first line of a block-level element.
`::first-line`: Applies styles to the first line of a block-level element. The length of the line depends on the element's width, font size, etc.
`::selection`: Applies styles to the part of a document that has been highlighted by the user. Limited to `color`, `background-color`, and `text-shadow`.
`::placeholder`: Styles the placeholder text within an `<input>` or `<textarea>` element.
`::marker`: Styles the marker box (e.g., bullet point or number) of a list item (`<li>`).
`::backdrop`: A full-screen pseudo-element rendered behind an element that is in Fullscreen mode or a top-layer `<dialog>` element.
`::file-selector-button`: Targets the "Choose File..." button in an `<input type="file">` element, allowing it to be styled.
Replaced Element: An element whose representation is outside the scope of CSS (e.g., `<img>`, `<iframe>`, `<input>`). `::before` and `::after` cannot be applied to these elements.

About the Author

TodoTutorial Team

Passionate developers and educators making programming accessible to everyone.

This article was written and reviewed by our team of web development experts, who have years of experience teaching CSS and building robust and accessible web applications.

Verification and Updates

Last reviewed: October 2025.

We strive to keep our content accurate and up-to-date. This tutorial is based on the latest CSS3 specifications and is periodically reviewed to reflect industry best practices.

External Resources

Found an error or have a suggestion? Contact us!