Styling the Unseen: Mastering CSS Pseudo-Elements

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

CSS is a cornerstone of web design.

Welcome! Today we'll learn to style parts of elements that don't exist in HTML, using Pseudo-Elements.

/* Our paragraph is ready for styling! */

Generating Content with ::before & ::after

The ::before and ::after pseudo-elements create a child element within the selected element, before or after the content respectively. They are essential for adding decorative content, icons, or tooltips without altering the HTML structure. Remember, they always require the content property!

Typographic Styling with ::first-letter & ::first-line

::first-letter and ::first-line are typographic pseudo-elements. ::first-letter applies styles to the first letter of a block of text, perfect for creating "drop caps". ::first-line styles the entire first line of text, which adjusts dynamically as the viewport width changes.

Customizing User Interaction with ::selection

The ::selection pseudo-element applies styles to the part of a document that has been highlighted by the user (by clicking and dragging the mouse). You can change the text color and background, but only a limited set of CSS properties are available for use.

Styling Form Fields with ::placeholder

With ::placeholder, you can style the placeholder text in an <input> or <textarea> element. This is a great way to customize form fields to match your site's design, changing properties like color, font style, and opacity.

Practice Zone

Interactive Test 1: Drag & Drop

Arrastra en el orden correspondiente.

Arrastra las opciones:

::selection

::before

::first-letter

Completa el código:

Adds content before the element______

Styles the first letter______

Styles highlighted text______

Unlock with Premium

Interactive Test 2: Fill in the Blanks

Rellena los huecos en cada casilla.

.quote {
  content: '“';
  font-size: 3em;
  color: #4f46e5;
}

Unlock with Premium

Practice Example: Code Editor

Use the ::selection pseudo-element to make any selected text on the page have a pink background and white text.

Enunciado:

* Escribe el código a continuación. Los caracteres correctos se mostrarán en verde y los incorrectos en rojo.

Unlock with Premium

Knowledge Check

Which property is required for ::before and ::after to work?

Unlock with Premium

← Previous Next →

Practical Uses for Pseudo-Elements

Pseudo-elements unlock powerful design patterns without extra HTML. They are your secret weapon for cleaner code and more sophisticated styling. Let's explore some real-world examples.

1. Custom List Bullets with `::marker`

Tired of the default list bullets? The ::marker pseudo-element gives you full control. You can change the color, size, and even the content of the bullet for both ordered and unordered lists.

ul li::marker {
  content: "✓ ";
  color: #16a34a;
  font-size: 1.2em;
}

First item
Second item
Third item

2. Simple Tooltips with `attr()`

Combine ::before or ::after with the attr() CSS function to create simple, HTML-free tooltips. The content of the tooltip is pulled directly from an HTML attribute like data-tooltip.

.tooltip {
  position: relative;
}
.tooltip:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  /* ...more styling */
}

3. Highlighting Required Form Fields

Use ::after to add a visual indicator, like an asterisk, to required form fields. This provides clear feedback to users without cluttering your HTML with extra elements.

label.required::after {
  content: " *";
  color: #ef4444;
  font-weight: bold;
}

Your Name

Practical Takeaway: Think of pseudo-elements whenever you need to style something that isn't a discrete HTML element. They keep your markup clean and your CSS powerful.