CSS Pseudo Elements

Intermediate ~9 min read

What are Pseudo Elements?

Pseudo-elements style specific parts of an element or insert content. They use double colons :: (single colon also works for legacy support).

Before & After

::before and ::after insert content before or after an element. Requires the content property!

HTML

CSS

<div class='quote'>This is a beautiful quote that will be decorated with pseudo-elements.</div>

Decorative Icons

Use ::before to add icons or decorative elements without cluttering HTML.

HTML

CSS

<ul class='list'>
  <li class='check'>Completed task</li>
  <li class='check'>Another done</li>
  <li class='arrow'>Next step</li>
</ul>

First Letter

::first-letter styles the first letter of a block element. Perfect for drop caps!

HTML

CSS

<p class='dropcap'>Once upon a time, in a land far away, there lived a developer who loved CSS. They spent their days crafting beautiful websites with elegant typography and stunning layouts.</p>

First Line

::first-line styles the first line of text in a block element.

HTML

CSS

<p class='intro'>This is the first line that will be styled differently. The rest of the paragraph will have normal styling and will wrap to multiple lines as needed.</p>

Clearfix with After

A classic use of ::after is the clearfix hack for containing floated elements.

HTML

CSS

<div class='container'>
  <div class='float-left'>Float Left</div>
  <div class='float-right'>Float Right</div>
</div>
<div class='next'>This stays below</div>

Important: ::before and ::after MUST have a content property, even if it's empty: content: '';

Summary

::before - Insert content before element
::after - Insert content after element
::first-letter - Style first letter
::first-line - Style first line
content property is required for ::before/::after
Use for decorative elements, not essential content

Quick Quiz

Which property is required for ::before and ::after?

display

content

position

text

Previous Pseudo Classes

Next Attribute Selectors

What are Pseudo Elements?

Before & After

Decorative Icons

First Letter

First Line

Clearfix with After

Summary

Quick Quiz

Enjoying these tutorials?