Overview of This Lesson

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:

See the Pen CSS Pseudo Elements: First Letter/Line by Wendi Jollymore (@ProfWendi) on CodePen.

(direct link to the descendant combinator exercise CodePen, opens in the pen tab)

::first-letter

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:

See the Pen CSS Pseudo Elements: First Letter/Line by Wendi Jollymore (@ProfWendi) on CodePen.

(direct link to the descendant combinator exercise CodePen, opens in the pen tab)

::before and ::after

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.

See the Pen Pseudo Elements: before/after by Wendi Jollymore (@ProfWendi) on CodePen.

(direct link to the before/after pseudo element example CodePen, opens in the pen tab)

Here's another example where I used ::before to add icons inside links, except I used HTML symbol entities instead of graphics files:

See the Pen Untitled by Wendi Jollymore (@ProfWendi) on CodePen.

(direct link to the before/after pseudo element example CodePen, opens in the pen tab)

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:

See the Pen List Markers by Wendi Jollymore (@ProfWendi) on CodePen.

(direct link to the coloured list marker example CodePen, opens in the pen tab)

If you add the content property, you can change the bullet shapes in an unordered list:

See the Pen List Markers by Wendi Jollymore (@ProfWendi) on CodePen.

(direct link to the marker/bullets example CodePen, opens in the pen tab)