The CSS Podcast - 014: Pseudo-elements

If you've got an article of contentand 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;}

Both the::before and::afterpseudo-elements create a child element inside an elementonly if you define acontent property.

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

Thecontent 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 imageurl,which will insert an image at its original dimensions,so you won't be able to resize it.You can also insert acounter.

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.

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 asbackground-image)
• border properties (such asborder-color)
• float
• font properties (such asfont-size andfont-weight)
• text properties (such astext-decoration andword-spacing)

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

The::first-linepseudo-element will let you style the first line of textonly if the element with::first-line applied has adisplay value ofblock,inline-block,list-item,table-caption ortable-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::markerpseudo-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 andtransition properties

You can change the marker symbol, using thecontent 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::selectionpseudo-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 butnotbackground-image
• text properties

::placeholder

You can add a helper hint to form elements,such as<input> with aplaceholder attribute.The::placeholderpseudo-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

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 elementsinside 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