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 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;
}
::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
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
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?
::pencil
::first-paragraph
:active
::marker
::after
::before
Pseudo-elements can be found in an HTML file.