Where pseudo classes allow you to style elements in a
specific state, pseudo elements allow you to
style specific parts of an element. For example,
you can style the first letter of a word or sentence.
You can also style what comes before or after an element:
this allows you to customize the numbers or symbols used in
numbered or bulleted lists, and even allows you to create custom
counters for lists.
Pre-Requisites
To get the most out of this lesson, you should make
sure you've gone through the Combinators
lesson and Pseudo
Classes lesson. It's also
important that you're familiar with the
HTML DOM and
related terminology.
Intro to Pseudo Elements
Pseudo elements allow you
to select and style a part of an element or a part of
an element's content, such as the element's first
letter or first line, selected text, etc. There
arent many psuedo elements but the ones available give you
a nice bit of flexibility when you want to do more complex
things.
Pseudo elements are similar to pseudo classes in syntax
except we use 2 colons instead of 1 (older versions of CSS
used 1 colon but developers found that confusing when
trying to tell a pseudo class from a pseudo element).
Other than that, you would use them in the same way
that you use pseudo classes.
Styling the First Line/Letter
You can use the ::first-line and
::first-letter pseudo elements to customize
the style of an element's first line of content and first
letter of content.
Limitations
::first-letter and ::first-line
can only be used on block elements, so you
can't use it on things like SPAN, STRONG, IMG, etc.
You're also limited in terms of what properties you're
allowed to style with these pseudo classes.
I'll mention the limitiations of each as we try the
demonstrations.
::first-line
When styling using ::first-line, keep in mind
that the contents of the first line of text in an element depends
on the width of the element. For example, block elements tend to
take up the entire width of the available viewport, so if a user resizes
the viewport or uses a smaller/larger screen, the amount of text in the
first line will change.
With ::first-line, you can style
font and text properties, foreground colour, and background
properties (color, image, repeat, etc).
Here's a demonstration of the ::first-line pseudo element:
You can use ::first-letter
to style an element with font and text properties,
foreground colour,
background properties (colour, image, repeat, etc),
and box model properties (padding/margin/border).
You can only style content with
::first-letter when there is no other content
preceding that content.
Here's a demonstration of the ::first-letter pseudo element:
The ::before and ::after pseudo elements can be used to
insert content before or after the content inside an
element. This is often used to create counters, for
lists, which will be covered in another lesson.
In this CodePen example, I use both ::before and
::after to insert a cat icon in front of and after the
content of the H1 element.
The nice thing about using character sybmols is that there
won't be any broken graphics if the graphic file doesn't
load.
In both examples, you'll see the content
property. The CSS content property is used
to replace an element's content with a specified value.
For example, we used it to set the value of the ::before and
::after pseudo elements (which by default, had no content until we
assigned them some). You could use the content
property with other selectors, but it's most often used with
selectors such as ::before and ::after.
Styling List Markers
The ::marker pseudo element allows you to
customize the style of the list marker or bullet in a
bulleted or numbered list. You can style the list marker with
any of the font properties, the color property,
and the content property (plus a couple of others that
are beyond the scope of this course).
One common use for the ::marker property
is to change the colour of the default bullets: