The Power of CSS Pseudo Elements

The power of
pseudo-elements
A CSS Tale from ::before to ::after

View Slide

“Power of Pseudo-elements” — @geoffreycrofte Luxembourg JS - 2020
Geoffrey Crofte
@geoffreycrofte
geoffrey.crofte.fr/en/
creativejuiz.fr/blog/en
Lead (System) Designer / UX Designer @

View Slide

Overview
What are they? 
Why are we gonna talk about it? 
Some basics: how to use them? 
Demo and code examples. 
Go further, together.

View Slide

What are those pseudo-elements?

View Slide

Pseudo-elements are often mistaken for
pseudo-classes.
A pseudo-element act like a new HTML
element in your code. 
A pseudo-class helps you target precisely
one or several elements among others.
Pseudo-what?

View Slide

Pseudo-classes
Lorem ipsum
Lorem ipsum
p:first-child {
font-weight: bold;
}
Lorem ipsum
Lorem ipsum
p.first {
font-weight: bold;
}

View Slide

Pseudo-elements
Lorem ipsum dolor sit amet, 
consectetur adipisicing elit. 
Nulla, eligendi.
p::first-letter {
font-weight: bold;
}
p span {
font-weight: bold;
}
Lorem ipsum
dolor sit amen, consectetur
adipisicing elit. Nulla,
eligendi.

View Slide

“Power of pseudo-elements” — @geoffreycrofte Luxembourg JS 2020
Which ones?
::before
::after

View Slide

I won’t talk about these one
::first-letter
::first-line
::selection

View Slide

Part of the “Generated Content” 
Ask to the User-Agent to generate a content
that is not already in the DOM. 
“Tree-Abiding Pseudo Elements”, 
they respect the existing DOM structure.
What’s define those

View Slide

A content is generated before or after the
content of the target. 
You can manipulate this content with
(almost) all the CSS you want. 
One common example are the and
elements. They generating content, dash
and numbers.
Principle

View Slide

Why are we gonna talk about it?

View Slide

Indeed, pseudo-elements exist since 2003, in
CR since 2011, CSS 2.1. 
In the end, they are used very little. 
When they are used, they are used
mechanically. 
The basics of CSS are sometimes
misunderstood, and they are quickly
forgotten.
Yes, tell me why?

View Slide

View Slide

“Don’t forget that old CSS 
still exists and is useful. 
You don’t need to use something
fancy for every effect.”
— Rachel Andrew
Front-End Conference Zurich - 30, 31 Aug. 2018

View Slide

How to use ::before and ::after

View Slide

Basic syntax

View Slide

In CSS2.1 the first syntax of the pseudo-
element was using colon mark (“ : ”)  
If you don’t need to support IE8, use (“ : : ”),
it’s a good way to mark the difference
between pseudo-class using : and pseudo-
element using : : 
Modern browers support both syntax.
Good to know

View Slide

Before & after what?

View Slide

Before & after what?
::before
::after
Before and after the content of an element,
within the content-box, no matter how many 
children in it.

View Slide

In da content-box
Voici mon super contenu
p::before {
content: 'BEFORE';
}
p::after {
content: 'AFTER';
}
BEFORELorem ipsum dolor sitAFTER

View Slide

Inspect the inspector
The content-box is in blue 
The margin-box is in yellow 
You can see the pseudo-elements generated
next to the content before and after it, to help
with debugging your CSS applied.

View Slide

Be careful with replaced content
Pseudo-element doesn’t work with
replaced elements, listed here.
Moreover, , dispite their
definition of non-replaced element
(widgets) doesn’t work with pseudo-
elements neither.
 
 
 
 
 
 
 
 
 
()
Source MDN

View Slide

Here are some values for content
none
normal
Reset

url()
attr()
counter([, ]) Utilitaire open-quote close-quote no-open-quote no-close-quote Citation p::before { content: <value>; } 

View Slide

Values for content

div::before {
content: 'Plop';
}
div::before {
content: '';
}
div::before {
content: '\f0ac';
}
Plop

View Slide

Values for content
url()
.bruce::before {
content: url(../images/lee.png);
}

View Slide

The targeted element
The height of
the targeted element

View Slide

The targeted element.
The resized
pseudo-element
area
.bruce::before {
content: url([…]);
width: 30px;
height: 30px; 
display: inline-block;
}

View Slide

.bruce::before {
width: 30px;
height: 30px; 
display: inline-flex;
} BUG ?
BUG ?
BUG ?

View Slide

.bruce::before {
content: ''; 
display: inline-block; 
background: url(../images/lee.png); 
background-size: contain;
width: 30px;
height: 30px;
}

View Slide

Value for content
attr()
a[hreflang]::after {
content: '(' attr(hreflang) ')';
}

View Slide

Values for content
counter()
ol > li::before {
counter-increment: myList;
content: counter(myList) " – ";
}

View Slide

You already use them…

View Slide

 
[…floating stuff…] 

Clearfix
A ancestral-old-ninja-technique well know to
restore the natural flow within a document, to
clear floating elements.
We started by using an empty element like a
then the technique has been revisited
to work with a simple class.
 
[…floating stuff…] 

View Slide

Clearfix
This class add a pseudo-element that plays
exactly the same role of an empty .
Why? Because like so, the CSS part stay into
your CSS code, no more empty that
serves only a styling purpose.
 
[…floating…] 
::after

.clearfix::after {
content: '';
display: block;
clear: both;
}

View Slide

Font-icon
The empty HTML element is used to create an
icon using font-icon and generated content.
Of course you could totally use the CSS class
by it self on another HTML element instead of
using an empty HTML element like
role="presentation">

View Slide

Your turn to play!
bit.ly/luxjs-exercises

View Slide

Example of exercise
Re-create this shape within a white rectangle
using only the element provide in the
file.
Remember to break down this form into
simpler shapes.
bit.ly/luxjs-exercises

View Slide

Possible solution

View Slide

Print visible links
For one of your project, you’ve been asked to
add a print function to some pages.
But when you print pages, links are not visible
or actionable anymore. (yeah obvious)
Use pseudo-element to display URL between
brackets.

View Slide

Solution

View Slide

File extension
One of the pages on your website displays a
list of files in different format.
Propose a CSS code to help distinguish the
multiple extensions.

View Slide

Solution

View Slide

Titles numbering
You are in a big document with a long text like
a thesis or something. You wanna bring
structure by numbering all the titles.
Use pseudo-element to add numbers before
the titles.

View Slide

Solution

View Slide

Just for fun

View Slide

Nested links
You want to make the whole card clickable, but
also the author and category links actionable.
Use pseudo-element to solve this issue. 
 
Pro tips: absolute & relative positions are your
best friends.
Go!

View Slide

Solution

View Slide

Tappable area
In the Design System I work on at Foyer, we
build components visually, but also
technically. To match recommendation in term
of ergonomy and accessibility, we make the
tappable area bigger using this same
technique.
Browser support is pretty good on android
and iOS.

View Slide

Paper stack effect
A bit of fun with this stack effect. 
This effect is used sometimes to represent a
pile of elements you gathered or you are drag
and dropping. For instance.
Recreate this effect with pseudo-element.

View Slide

Solution

View Slide

View Slide

Burger icon
For the mobile version of your menu, you want
to create this fancy animated effect.
Know that you can do it with a single span
and pseudo-elements.

View Slide

Solution

View Slide

Custom Radio Buttons
Create custom radio buttons thanks to
pseudo-element. Make it funny or just bigger
for a better usability and accessibility.
You did always dream about it, right?

View Slide

HTML Structure

View Slide

CSS Solution

View Slide

Fractured Text Effect
Reproduce the fractured text effect with the
things you know now about pseudo-elements.
Inspired from an article by Mandy Michael.

View Slide

HTML Base

View Slide

Solution

View Slide

View Slide

Let’s go further

View Slide

Values for content
url()
.bruce::before {
}

View Slide

Values for content
url()
.bruce::before {
content: url(../images/lee.mov) 
/ 'Bruce Lee in action';
}

View Slide

Values for content
Fallback
.bruce::before {
content: url(../images/lee.mov), 
url(../images/lee.png), 
'Chuck Norris';
}

View Slide

Demo : Filtres photo
Des filtres CSS appliqués sur une photo
permettent de lui redonner un peu
de vibrance, contraste et couleurs.
Un effet de halo/lumière est donnée grâce
à un pseudo-élément.
http://bit.ly/filterCSS

View Slide

View Slide

mix-blend-mode magic!

View Slide

una.im/CSSgram

View Slide

Demo: Break the grid
On a project where the code was untouchable,
I was only allowed to use CSS, not even JS.
The grid system was in flexbox and the re-
design put the first item on the top of the row,
alone.
One pseudo-element, and done.
http://bit.ly/flexgridbreak

View Slide

Demo : Casser la grille
order
-1
alone.

View Slide

order
-1
::before
alone.

View Slide

alone.

View Slide

You can use pseudo-elements to create
advanced drop-shadows.
Demo
Advanced Shadows
bit.ly/CSSshadows

View Slide

You can animate the ouline of a button, and
you don’t even need SVG to do so.
Demo
Snake Button
bit.ly/snakebutton

View Slide

Demo
Animated icon
An icon is oftentime simple geometric
elements. That’s really easy to animate.
bit.ly/scrollicon

View Slide

Demo
Image-link Caption
When Stéphanie redesigned her portfolio, I
build all the animation using pseudo-
elements.
StephanieWalter.design

View Slide

Demo
Mobile Menu
For the same website, the same menu take a
different form on mobiles.
All the destroyed effect are made with skew
transformations and pseudo-elements.
bit.ly/slowmomenu

View Slide

Demo
Lightbox CSS Only
Just for fun, I reproduce the Lightbox effect in
CSS with pseudo-element en CSS function
element().
bit.ly/lightboxCSSonly

View Slide

View Slide

Demo
Fractured Text
Another demo by Mandy Michael of a fractured
text with the help of clip-path: polygon();
bit.ly/fracturedtext

View Slide

A pseudo-element ::before
for an image

View Slide

Styled broken image
img::before { 
content: 'Arf, can’t load';
}
img::after { 
content: "\f1c5" " " attr(alt);
}

View Slide

Source : Styling Broken Images
* alt displayed only if image 
dimensions allow it 
* * font-styling property are 
not applied
Compatibility: broken image

View Slide

Fine tuning
You can revise your layout by
breaking things down. (grid
manipulation)
Shape things
They allow you to create visual
things with only CSS (no need for
empty divs)
Responsive
It’s CSS, so you can totally add
media-query conditions to your
pseudo-element styling.
Generated Content
Add custom content in the DOM
with no need to edit your HTML.
Advantage of using
pseudo-elements

View Slide

Source : Can I use
Support: Pseudo-elements 98,24%
Global users

View Slide

Source : Can I use
Support: CSS Transitions 97,11%
Global users

View Slide

Source : Can I use
Support: Blend-mode ~91%
Global users

View Slide

Source : Can I use
Support: CSS Filter Effects 95,38%
Global users

View Slide

Source : Can I use
Support: Pointer Events 97.8%
Global users

View Slide

Source : Can I use
Support: Clip-path() 93.69%
Global users

View Slide

Source : Can I use
Support : CSS element() function 4,5%
Global users

View Slide

Source : Accessibility support for CSS generated content
Accessibility: Support

View Slide

target-counter()
 
Allows you to generate a
counter related to a targeted
element. The content here take
2 parameters: the href content
as target, and number of page
as template.
Other values for content
We talk about it page 23

View Slide

target-text()
 
Same as previous example, but
here the content is generated
from the text within the
targeted element.
Nous en parlerons  
au chapitre “Variables CSS”
DRAFT

View Slide

leaders()
 
Allows you to create a pattern to
visually link content together. Here
with a dot pattern and in combination
with target-counter() function.
Chapitre 1 ………… page 3 
Chapitre 2 ………… page 4 
Chapitre 3 ………… page 12
DRAFT

View Slide

content()
 
Allows you to generate a content
based on the content of the targeted
element, with some parameters
available: text, before, after,
first-letter, marker.
DRAFT

View Slide

::inactive-selection – a selected content that doesn’t get the focus anymore.
::spelling-error – a text marked with wrong spelling by the user-agent.
::grammar-error – a text marked with wrong grammar by the user-agent.
Highlight Pseudo-elements
::marker – the pseudo-element just before you list-item. (already supported by 20% of users)
::placeholder – the textual temporary content within a form field. (already supported by 95% of
users)
Tree-Abiding Pseudo-elements
Other (new) pseudo-elements?

View Slide

CSS3 Content — W3C definition.
CSS3 Content — MDN definition and examples.
Replaced Elements – MDN definition.
A11y support for generated content.
Styling Broken Images
Mandy Michael – her Twitter account.
Rachel Andrew – her website.
Some resources

View Slide

I don’t bite so far…
Any question?

View Slide

“Power of Pseudo-elements” — @geoffreycrofte Luxembourg JS - 2020
Geoffrey Crofte
@geoffreycrofte
geoffrey.crofte.fr/en/
creativejuiz.fr/blog/en
Lead (System) Designer / UX Designer @

View Slide

The Power of CSS Pseudo Elements

The Power of CSS Pseudo Elements

Geoffrey Crofte

More Decks by Geoffrey Crofte

Other Decks in Programming

Featured

Transcript