The power of CSS pseudo-elements

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

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

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

What are those pseudo-elements?

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?

Pseudo-classes
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
p:first-child {
font-weight: bold;
}
<p class="first">Lorem ipsum</p>
<p>Lorem ipsum</p>
p.first {
font-weight: bold;
}

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

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

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

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

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 <ul> and <ol>
elements. They generating content, dash
and numbers.
Principle

Why are we gonna talk about it?

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?

“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

How to use ::before and ::after

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

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

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

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.

Be careful with replaced content
Pseudo-element doesn’t work with
replaced elements, listed here.
Moreover, <input>, dispite their
definition of non-replaced element
(widgets) doesn’t work with pseudo-
elements neither.
<img> 
<iframe> 
<video> 
<embed> 
<audio> 
<option> 
<canvas> 
<object> 
<applet> 
(<input>)
Source MDN

Here are some values for content
none
normal
Reset
<string>
url()
attr(<attr-name>)
counter(<name>[, <style>])
Utilitaire
open-quote
close-quote
no-open-quote
no-close-quote
Citation
p::before {
content: <value>;
}

Values for content
<string>
div::before {
content: 'Plop';
}
div::before {
content: '';
}
div::before {
content: 'f0ac';
}
Plop

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

The targeted element
The height of
the targeted element

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

.bruce::before {
content: url(../images/lee.png);
width: 30px;
height: 30px; 
display: inline-flex;
}
BUG ?
BUG ?
BUG ?

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

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

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

<div class="component"> 
[…floating stuff…] 
<div class="clear"></div>
</div>
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
<div> then the technique has been revisited
to work with a simple class.
<div class="component clearfix"> 
[…floating stuff…] 
</div>

Clearfix
This class add a pseudo-element that plays
exactly the same role of an empty <div>.
Why? Because like so, the CSS part stay into
your CSS code, no more empty <div> that
serves only a styling purpose.
<div class="component clearfix"> 
[…floating…] 
::after
</div>
.clearfix::after {
content: '';
display: block;
clear: both;
}

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 <i>
<i class="fa fa-check"
role="presentation"></i>

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

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

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.

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.

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.

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!

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.

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.

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.

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? 😛

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

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

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

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

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

Demo : Casser la grille
order
-1
alone.

order
-1
::before
alone.

alone.

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

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

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

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

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

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

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

A pseudo-element ::before
for an image

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

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

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

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

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

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

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

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

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

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

Source : Accessibility support for CSS generated content
Accessibility: Support

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

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

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

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

::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?

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

I don’t bite so far…
Any question?

The power of CSS pseudo-elements

More Related Content

What's hot

Similar to The power of CSS pseudo-elements

Recently uploaded

The power of CSS pseudo-elements