CSS Pseudo-elements

Imagine writing a letter. By default, your pen writes standard letters. But if you want to make it look special, you can draw a giant, decorative capital letter at the very start of your paragraph, or add a cute little star sticker right before your signature. CSS pseudo-elements are those decorative additions. While pseudo-classes target elements in specific states, pseudo-elements allow you to create and style brand-new, virtual elements (like adding icons or drop caps) directly from your stylesheet, without modifying your HTML files.

In this page:

What is a Pseudo-element?
Inserting Content with ::before
Inserting Content with ::after
Custom Selection Colors with ::selection
Styling Form Placeholders with ::placeholder

What is a Pseudo-element?

Pseudo-elements are used to style specific parts of an element, or to insert virtual elements into your layout directly from your stylesheet, using a double colon (::) prefix to distinguish them from pseudo-classes.

Note: Always use the double colon (::) prefix for pseudo-elements to comply with modern CSS standards.

Warning: The ::before and ::after pseudo-elements must have a content property defined (even if it is empty), or they will fail to render.

Example: What is a Pseudo-element?

css

<style>
p::before {
  content: "» ";
}
</style>
<p>Pseudo-element inserted before this text</p>

Inserting Content with ::before

The ::before pseudo-element allows you to insert virtual content directly before the content of an element. This is incredibly useful for adding decorative icons, bullet markers, or automated labels without cluttering your HTML files.

Note: Use ::before to add uniform visual icons (like lock symbols) next to your secure link routes.

Warning: Do not put essential text content inside your pseudo-elements, as screen readers may ignore them.

Example: Inserting Content with ::before

css

<style>
.secure::before {
  content: "🔒 ";
}
</style>
<a class="secure" href="#">Secure Link</a>

Inserting Content with ::after

The ::after pseudo-element works exactly like ::before, but it inserts the virtual content directly after the content of the targeted element. It is commonly used to append file formats, external link icons, or clear floated parent containers.

Note: Use ::after to automatically append absolute link paths next to anchor text when printing pages.

Warning: All content injected using pseudo-elements is non-selectable by users on the screen.

Example: Inserting Content with ::after

css

<style>
a.pdf::after {
  content: " (PDF)";
}
</style>
<a class="pdf" href="#">Download Report</a>

Custom Selection Colors with ::selection

The ::selection pseudo-element allows you to customize the highlight and text colors used when a user selects or highlights text on your webpage, replacing the browser's default blue highlighting with your own brand themes.

Note: Choose selection colors that offer high contrast against your highlighted text to keep it readable.

Warning: The ::selection pseudo-element only supports background-color and color styling rules; other properties like font-size will be ignored.

Example: Custom Selection Colors with ::selection

css

<style>
::selection {
  background: gold;
  color: black;
}
</style>
<p>Select this text to see a custom highlight color</p>

Styling Form Placeholders with ::placeholder

The ::placeholder pseudo-element allows you to style the temporary, grayed-out placeholder hints inside your form inputs, letting you customize their text color, font style, and opacity to coordinate with your website theme.

Note: Make sure your placeholder text color is not too light or too dark to keep it readable.

Warning: Some older browsers require vendor prefixes (like -webkit-input-placeholder) to style placeholders correctly.

Example: Styling Form Placeholders with ::placeholder

css

<style>
input::placeholder {
  color: #999;
  font-style: italic;
}
</style>
<input type="text" placeholder="Enter your name">

Common Mistakes

Forgetting to write the required content property inside ::before and ::after pseudo-elements, which prevents them from rendering.
Using a single colon (:) instead of a double colon (::) when writing modern pseudo-elements.
Attempting to apply unsupported styling properties (like font-size) inside ::selection declarations.

Chapter Summary

Pseudo-elements allow you to create and style brand-new, virtual elements directly from your stylesheet.
Use ::before and ::after to insert decorative content, symbols, or bullet markers before or after your elements.
Customize selection highlights using ::selection, and style temporary form input hints using ::placeholder.

Browser Support

Standard CSS pseudo-elements (::before, ::after, ::selection) are natively supported by all modern web browsers.

🔒

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Pseudo-classes Next Lesson → CSS Opacity