Pseudo-elements

The CSS Podcast - 014: Pseudo-elements

If you've got an article of content and you want the first letter to be a much bigger drop cap— how do you achieve that?

In CSS, you can use the ::first-letter pseudo-element to achieve this sort of design detail.

p::first-letter {
  color: blue;
  float: left;
  font-size: 2.6em;
  font-weight: bold;
  line-height: 1;
  margin-inline-end: 0.2rem;
}

A pseudo-element is like adding or targeting an extra element without having to add more HTML. This example solution, using ::first-letter, is one of many pseudo-elements. They have a range of roles, and in this lesson you're going to learn which pseudo-elements are available and how you can use them.

::before and ::after #

Both the ::before and ::after pseudo-elements create a child element inside an element only if you define a content property.

.my-element::before {
	content: "";
}

.my-element::after {
	content: "";
}

The content can be any string —even an empty one— but be mindful that anything other than an empty string will likely be announced by a screen reader. You can add an image url, which will insert an image at its original dimensions, so you won't be able to resize it. You can also insert a counter.

Once a ::before or ::after element has been created, you can style it however you want with no limits. You can only insert a ::before or ::after element to an element that will accept child elements (elements with a document tree), so elements such as <img />, <video> and <input> won't work.

::first-letter #

We met this pseudo-element at the start of the lesson. It is worth being aware that not all CSS properties can be used when targeting ::first-letter. The available properties are:

• color
• background properties (such as background-image)
• border properties (such as border-color)
• float
• font properties (such as font-size and font-weight)
• text properties (such as text-decoration and word-spacing)

p::first-letter {
  color: goldenrod;
  font-weight: bold;
}

::first-line #

The ::first-line pseudo-element will let you style the first line of text only if the element with ::first-line applied has a display value of block, inline-block, list-item, table-caption or table-cell.

p::first-line {
  color: goldenrod;
  font-weight: bold;
}

Like the ::first-letter pseudo-element, there's only a subset of CSS properties you can use:

• color
• background properties
• font properties
• text properties

::backdrop #

If you have an element that is presented in full screen mode, such as a <dialog> or a <video>, you can style the backdrop—the space between the element and the rest of the page—with the ::backdrop pseudo-element:

video::backdrop {
  background-color: goldenrod;
}

The ::backdrop pseudo-element is supported in all major browsers apart from Safari.

::marker #

The ::marker pseudo-element lets you style the bullet or number for a list item or the arrow of a <summary> element.

::marker {
  color: hotpink;
}

ul ::marker {
  font-size: 1.5em;
}

ol ::marker {
  font-size: 1.1em;
}

summary::marker {
  content: '\002B'' '; /* Plus symbol with space */
}

details[open] summary::marker {
  content: '\2212'' '; /* Minus symbol with space */
}

Only a small subset of CSS properties are supported for ::marker:

• color
• content
• white-space
• font properties
• animation and transition properties

You can change the marker symbol, using the content property. You can use this to set a plus and minus symbol for the closed and empty states of a <summary> element, for example.

::selection #

The ::selection pseudo-element allows you to style how selected text looks.

::selection {
  background: green;
  color: white;
}

This pseudo-element can be used to style all selected text as in the above demo. It can also be used in combination with other selectors for a more specific selection style.

p:nth-of-type(2)::selection {
  background: darkblue;
  color: yellow;
}

As with other pseudo-elements, only a subset of CSS properties are allowed:

• color
• background-color but not background-image
• text properties

::placeholder #

You can add a helper hint to form elements, such as <input> with a placeholder attribute. The ::placeholder pseudo-element allows you to style that text.

input::placeholder {
  color: darkcyan;
}

The ::placeholder only supports a subset of CSS rules:

• color
• background properties
• font properties
• text properties

::cue #

Last in this tour of pseudo-elements is the ::cue pseudo-element. This allows you to style the WebVTT cues, which are the captions of a <video> element.

You can also pass a selector into a ::cue, which allows you to style specific elements inside a caption.

video::cue {
  color: yellow;
}

video::cue(b) {
  color: red;
}

video::cue(i) {
  color: lightpink;
}