Pseudo-elements
A pseudo-element is like adding or targeting an extra element without having to add more HTML. They have a variety of roles and you can learn about them in this module.

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 asbackground-image
)border
properties (such asborder-color
)float
font
properties (such asfont-size
andfont-weight
)- text properties (such as
text-decoration
andword-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
propertiesfont
propertiestext
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
propertiesanimation
andtransition
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 notbackground-image
text
properties
::placeholder
#
- Chrome 57, Supported 57
- Firefox 51, Supported 51
- Edge 79, Supported 79
- Safari 10.1, Supported 10.1
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
propertiesfont
propertiestext
properties
::cue
#
- Chrome 26, Supported 26
- Firefox 55, Supported 55
- Edge 79, Supported 79
- Safari 7, Supported 7
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;
}
Which of the following are not pseudo-elements?
::before
::first-paragraph
::after
::marker
::pencil
:active
Don't forget to add content: '';
.
This doesn't exist in CSS.
Don't forget to add content: '';
.
This is the bullet element when you use a list element or display type.
This doesn't exist in CSS.
This is a pseudo-class not a pseudo-element.
Pseudo-elements can be found in an HTML file.
True FalseWhile DevTools may show pseudo-elements in the Elements panel, pseudo-elements won't be found in the HTML, they're owned by the browser.
They can be targeted by CSS but won't be found in the HTML.