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

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

Check your understanding

Test your knowledge of pseudo-elements