CSS Pseudo-elements

Pseudo-elements are keywords added to a selector that allow you to style a specific part of the selected element(s). For example, you can use them to style the first letter or first line of an element, or to insert generated content before or after an element's content.

The syntax for a pseudo-element uses a double colon :: followed by the pseudo-element name.

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

Note: In older CSS specifications, pseudo-elements used a single colon :, just like pseudo-classes. Modern browsers still support the single colon syntax for backward compatibility. However, to distinguish pseudo-classes from pseudo-elements, the best practice is to use the double colon :: for pseudo-elements.

`::first-line`

The ::first-line pseudo-element is used to apply styles to the first line of text in a block-level element. The length of the line depends on various factors, such as element width, document width, and font size.

css

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

`::first-letter`

The ::first-letter pseudo-element is used to apply styles to the first letter of the first line of a block-level element. This is often used to create "drop cap" effects.

css

p::first-letter {
  font-size: 200%;
  color: #8A2BE2;
  float: left;
  margin-right: 5px;
}

`::before` and `::after`

::before and ::after are the most powerful and commonly used pseudo-elements. They are used to insert generated content before or after the content of the selected element.

You must use the content property to specify the content to be inserted for these two pseudo-elements. Even if the content is empty, the content property is required.

Values for the `content` Property

String: content: "Read more: ";
attr(): content: attr(data-tooltip); - Gets the value of a specific attribute on the element.
url(): content: url(image.jpg); - Inserts an image.
Empty String: content: ""; - This is the most common usage, usually for creating purely decorative shapes or for clearing floats (clearfix hack).

Examples

1. Adding Custom Bullets to List Items

css

li::before {
  content: "\2713\00A0"; /* ✓ character and non-breaking space */
  color: green;
}

2. Creating a Tooltip

html

<span class="tooltip" data-tooltip="This is a tooltip">Hover over me</span>

css

.tooltip::after {
  content: attr(data-tooltip);
  /* ...other styles for positioning and styling the tooltip... */
}

3. Creating Decorative Shapes

Because ::before and ::after behave like child elements, we can style them just like regular elements, including background, border, dimensions, and positioning. This makes them powerful tools for creating complex UI effects without adding extra HTML elements.

css

.box {
  position: relative;
}

.box::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: 20px;
  height: 20px;
  background-color: red;
}

`::marker`

The ::marker pseudo-element selects the marker box of a list item, such as the bullet of an <li> element or the arrow of a <summary> element.

css

::marker {
  color: red;
  font-size: 1.2em;
}

`::selection`

The ::selection pseudo-element matches the portion of an element that is selected by a user (e.g., highlighting text with the mouse).

css

::selection {
  color: white;
  background: #ff6b6b;
}

Pseudo-elements provide powerful capabilities to add extra visual elements and styles to a page without modifying the HTML structure.

CSS Pseudo-elements ​

::first-line ​

::first-letter ​

::before and ::after ​

Values for the content Property ​

Examples ​

::marker ​

::selection ​