Slide 1
Slide 1 text
The power of
pseudo-elements
A CSS Tale from ::before to ::after
Slide 2
Slide 2 text
“Power of Pseudo-elements” — @geoffreycrofte Luxembourg JS - 2020
Geoffrey Crofte
@geoffreycrofte
geoffrey.crofte.fr/en/
creativejuiz.fr/blog/en
Lead (System) Designer / UX Designer @
Slide 3
Slide 3 text
Overview
What are they?
Why are we gonna talk about it?
Some basics: how to use them?
Demo and code examples.
Go further, together.
Slide 4
Slide 4 text
What are those pseudo-elements?
Slide 5
Slide 5 text
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?
Slide 6
Slide 6 text
Pseudo-classes
Lorem ipsum
Lorem ipsum
p:first-child { font-weight: bold; }Lorem ipsum
Lorem ipsum
p.first { font-weight: bold; }Slide 7
Slide 7 text
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.
Slide 8
Slide 8 text
“Power of pseudo-elements” — @geoffreycrofte Luxembourg JS 2020
Which ones?
::before
::after
Slide 9
Slide 9 text
“Power of pseudo-elements” — @geoffreycrofte Luxembourg JS 2020
I won’t talk about these one
::first-letter
::first-line
::selection
Slide 10
Slide 10 text
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
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
Why are we gonna talk about it?
Slide 13
Slide 13 text
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?
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
“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
Slide 17
Slide 17 text
How to use ::before and ::after
Slide 18
Slide 18 text
Basic syntax
Slide 19
Slide 19 text
Basic syntax
Slide 20
Slide 20 text
Basic syntax
Slide 21
Slide 21 text
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
Slide 22
Slide 22 text
Before & after what?
Slide 23
Slide 23 text
Before & after what?
Slide 24
Slide 24 text
Before & after what?
Slide 25
Slide 25 text
Before & after what?
Slide 26
Slide 26 text
Before & after what?
::before
::after
Before and after the content of an element,
within the content-box, no matter how many
children in it.
Slide 27
Slide 27 text
In da content-box
Voici mon super contenu
p::before { content: 'BEFORE'; } p::after { content: 'AFTER'; } BEFORELorem ipsum dolor sitAFTERSlide 28
Slide 28 text
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.
Slide 29
Slide 29 text
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
Slide 30
Slide 30 text
“Power of pseudo-elements” — @geoffreycrofte Luxembourg JS 2020
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>;
}
Slide 31
Slide 31 text
Values for content
div::before {
content: 'Plop';
}
div::before {
content: '';
}
div::before {
content: '\f0ac';
}
Plop
Slide 32
Slide 32 text
“Power of pseudo-elements” — @geoffreycrofte Luxembourg JS 2020
Values for content
url()
.bruce::before {
content: url(../images/lee.png);
}
Slide 33
Slide 33 text
The targeted element
The height of
the targeted element
Slide 34
Slide 34 text
The targeted element.
The resized
pseudo-element
area
.bruce::before {
content: url([…]);
width: 30px;
height: 30px;
display: inline-block;
}
Slide 35
Slide 35 text
.bruce::before {
content: url(../images/lee.png);
width: 30px;
height: 30px;
display: inline-flex;
} BUG ?
BUG ?
BUG ?
Slide 36
Slide 36 text
.bruce::before {
content: '';
display: inline-block;
background: url(../images/lee.png);
background-size: contain;
width: 30px;
height: 30px;
}
Slide 37
Slide 37 text
Value for content
attr()
a[hreflang]::after {
content: '(' attr(hreflang) ')';
}
Slide 38
Slide 38 text
Values for content
counter()
ol > li::before {
counter-increment: myList;
content: counter(myList) " – ";
}
Slide 39
Slide 39 text
You already use them…
Slide 40
Slide 40 text
[…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…]
Slide 41
Slide 41 text
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;
}
Slide 42
Slide 42 text
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
Slide 43
Slide 43 text
Your turn to play!
bit.ly/luxjs-exercises
Slide 44
Slide 44 text
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
Slide 45
Slide 45 text
Possible solution
Slide 46
Slide 46 text
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.
Slide 47
Slide 47 text
Solution
Slide 48
Slide 48 text
Solution
Slide 49
Slide 49 text
Solution
Slide 50
Slide 50 text
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.
Slide 51
Slide 51 text
Solution
Slide 52
Slide 52 text
Solution
Slide 53
Slide 53 text
Solution
Slide 54
Slide 54 text
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.
Slide 55
Slide 55 text
Solution
Slide 56
Slide 56 text
Solution
Slide 57
Slide 57 text
Solution
Slide 58
Slide 58 text
Solution
Slide 59
Slide 59 text
Just for fun
Slide 60
Slide 60 text
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!
Slide 61
Slide 61 text
Solution
Slide 62
Slide 62 text
Solution
Slide 63
Slide 63 text
Solution
Slide 64
Slide 64 text
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.
Slide 65
Slide 65 text
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.
Slide 66
Slide 66 text
Solution
Slide 67
Slide 67 text
Solution
Slide 68
Slide 68 text
Solution
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
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.
Slide 71
Slide 71 text
Solution
Slide 72
Slide 72 text
Solution
Slide 73
Slide 73 text
Solution
Slide 74
Slide 74 text
Solution
Slide 75
Slide 75 text
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?
Slide 76
Slide 76 text
HTML Structure
Slide 77
Slide 77 text
CSS Solution
Slide 78
Slide 78 text
CSS Solution
Slide 79
Slide 79 text
CSS Solution
Slide 80
Slide 80 text
CSS Solution
Slide 81
Slide 81 text
Fractured Text Effect
Reproduce the fractured text effect with the
things you know now about pseudo-elements.
Inspired from an article by Mandy Michael.
Slide 82
Slide 82 text
HTML Base
Slide 83
Slide 83 text
Solution
Slide 84
Slide 84 text
Solution
Slide 85
Slide 85 text
Solution
Slide 86
Slide 86 text
No content
Slide 87
Slide 87 text
Let’s go further
Slide 88
Slide 88 text
“Power of pseudo-elements” — @geoffreycrofte Luxembourg JS 2020
Values for content
url()
.bruce::before {
content: url(../images/lee.png);
}
Slide 89
Slide 89 text
Values for content
url()
.bruce::before {
content: url(../images/lee.mov)
/ 'Bruce Lee in action';
}
Slide 90
Slide 90 text
“Power of pseudo-elements” — @geoffreycrofte Luxembourg JS 2020
Values for content
Fallback
.bruce::before {
content: url(../images/lee.mov),
url(../images/lee.png),
'Chuck Norris';
}
Slide 91
Slide 91 text
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
Slide 92
Slide 92 text
No content
Slide 93
Slide 93 text
No content
Slide 94
Slide 94 text
No content
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
No content
Slide 97
Slide 97 text
mix-blend-mode magic!
Slide 98
Slide 98 text
una.im/CSSgram
Slide 99
Slide 99 text
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
Slide 100
Slide 100 text
Demo : Casser la grille
http://bit.ly/flexgridbreak
order
-1
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.
Slide 101
Slide 101 text
Demo : Casser la grille
http://bit.ly/flexgridbreak
order
-1
::before
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.
Slide 102
Slide 102 text
Demo : Casser la grille
http://bit.ly/flexgridbreak
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.
Slide 103
Slide 103 text
Demo : Casser la grille
http://bit.ly/flexgridbreak
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.
Slide 104
Slide 104 text
You can use pseudo-elements to create
advanced drop-shadows.
Demo
Advanced Shadows
bit.ly/CSSshadows
Slide 105
Slide 105 text
You can animate the ouline of a button, and
you don’t even need SVG to do so.
Demo
Snake Button
bit.ly/snakebutton
Slide 106
Slide 106 text
Demo
Animated icon
An icon is oftentime simple geometric
elements. That’s really easy to animate.
bit.ly/scrollicon
Slide 107
Slide 107 text
Demo
Image-link Caption
When Stéphanie redesigned her portfolio, I
build all the animation using pseudo-
elements.
StephanieWalter.design
Slide 108
Slide 108 text
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
Slide 109
Slide 109 text
Demo
Lightbox CSS Only
Just for fun, I reproduce the Lightbox effect in
CSS with pseudo-element en CSS function
element().
bit.ly/lightboxCSSonly
Slide 110
Slide 110 text
No content
Slide 111
Slide 111 text
Demo
Fractured Text
Another demo by Mandy Michael of a fractured
text with the help of clip-path: polygon();
bit.ly/fracturedtext
Slide 112
Slide 112 text
“Power of pseudo-elements” — @geoffreycrofte Luxembourg JS 2020
A pseudo-element ::before
for an image
Slide 113
Slide 113 text
Styled broken image
img::before {
content: 'Arf, can’t load';
}
img::after {
content: "\f1c5" " " attr(alt);
}
Slide 114
Slide 114 text
Source : Styling Broken Images
* alt displayed only if image
dimensions allow it
* * font-styling property are
not applied
Compatibility: broken image
Slide 115
Slide 115 text
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
Slide 116
Slide 116 text
Source : Can I use
Support: Pseudo-elements 98,24%
Global users
Slide 117
Slide 117 text
Source : Can I use
Support: CSS Transitions 97,11%
Global users
Slide 118
Slide 118 text
Source : Can I use
Support: Blend-mode ~91%
Global users
Slide 119
Slide 119 text
Source : Can I use
Support: CSS Filter Effects 95,38%
Global users
Slide 120
Slide 120 text
Source : Can I use
Support: Pointer Events 97.8%
Global users
Slide 121
Slide 121 text
Source : Can I use
Support: Clip-path() 93.69%
Global users
Slide 122
Slide 122 text
Source : Can I use
Support : CSS element() function 4,5%
Global users
Slide 123
Slide 123 text
Source : Accessibility support for CSS generated content
Accessibility: Support
Slide 124
Slide 124 text
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
Slide 125
Slide 125 text
target-text()
Same as previous example, but
here the content is generated
from the text within the
targeted element.
Other values for content
Nous en parlerons
au chapitre “Variables CSS”
DRAFT
Slide 126
Slide 126 text
leaders()
Allows you to create a pattern to
visually link content together. Here
with a dot pattern and in combination
with target-counter() function.
Other values for content
Chapitre 1 ………… page 3
Chapitre 2 ………… page 4
Chapitre 3 ………… page 12
DRAFT
Slide 127
Slide 127 text
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.
Other values for content
DRAFT
Slide 128
Slide 128 text
::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?
Slide 129
Slide 129 text
“Power of pseudo-elements” — @geoffreycrofte Luxembourg JS 2020
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
Slide 130
Slide 130 text
I don’t bite so far…
Any question?
Slide 131
Slide 131 text
“Power of Pseudo-elements” — @geoffreycrofte Luxembourg JS - 2020
Geoffrey Crofte
@geoffreycrofte
geoffrey.crofte.fr/en/
creativejuiz.fr/blog/en
Lead (System) Designer / UX Designer @