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?

A couple of paragraphs of text with a blue drop cap

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

Browser Support

  • 57
  • 79
  • 51
  • 10.1

Source

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

Browser Support

  • 26
  • 79
  • 55
  • 7

Source

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;
}

Check your understanding

Test your knowledge of pseudo-elements

Which of the following are not pseudo-elements?

::before
Don't forget to add content: '';.
::first-paragraph
This doesn't exist in CSS.
::after
Don't forget to add content: '';.
::marker
This is the bullet element when you use a list element or display type.
::pencil
This doesn't exist in CSS.
:active
This is a pseudo-class not a pseudo-element.

Pseudo-elements can be found in an HTML file.

True
While DevTools may show pseudo-elements in the Elements panel, pseudo-elements won't be found in the HTML, they're owned by the browser.
False
They can be targeted by CSS but won't be found in the HTML.