CSS Pseudo-elements

Yesterday we briefly touched on pseudo-elements when creating our custom checkbox

But let’s dive deeper into these awesome features of CSS. Pseudo-elements allow you to create/manipulate an original element. Without affecting that one.

They can be used to style a specific part of an element, like the first letter or add content before or after!

Pseudo-elements always start with ::!

First-line pseudo-element

With the first-line pseudo-element, we can manipulate the view of the first line of a specific element.

See the following example:

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
  dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
  mollit anim id est laborum.
</p>

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

This will result into the following:

See the Pen First-line pseudo-element by Chris Bongers (@rebelchris) on CodePen.

First-letter pseudo-element

Much like the above one this one is used to style a part of an element, but in this case only the first letter.

The html we can re-use

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
  dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
  mollit anim id est laborum.
</p>

p::first-letter {
  color: teal;
  font-family: Verdana;
  font-size: 36px;
  display: inline-block;
  float: left;
  padding-right: 5px;
}

You will get this result:

See the Pen First-letter pseudo-element by Chris Bongers (@rebelchris) on CodePen.

Before pseudo-element

The before pseudo-element we saw in action yesterday when we created custom checkboxes. It can we used in many ways though!

<a href="https://daily-dev-tips.com">Daily Dev Tips</a>
<br />
<a href="https://twitter.com/DailyDevTips1">Twitter</a>

a::before {
  content: '⚓️';
}

So let’s say we want to add an anchor icon to every one of our links, it’s just as easy as this!

Check out this Codepen example:

See the Pen Before pseudo-element by Chris Bongers (@rebelchris) on CodePen.

Note: The before and after pseudo-elements always need content to render!

After pseudo-element

The after is basically used in the same way as the before but will place the content after the element.

<a href="https://daily-dev-tips.com">Daily Dev Tips</a>
<br />
<a href="https://twitter.com/DailyDevTips1">Twitter</a>

a::after {
  content: ' (Read more)';
}

This will generate the following:

See the Pen After pseudo-element by Chris Bongers (@rebelchris) on CodePen.

Selection pseudo-element

Another cool one is the selection pseudo-element. It will trigger when someone selects text.

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
  dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
  mollit anim id est laborum.
</p>

p::selection {
  background: teal;
  color: #fff;
}

Now try and select a piece of this text; it should show a teal background with white text!

See the Pen Selection pseudo-element by Chris Bongers (@rebelchris) on CodePen.