Презентация - The power of pseudo-elements a css tale from ::before to ::after

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

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

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-what?
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-classes
p:first-child { font-weight: bold; } p.first { font-weight: bold; }

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Pseudo-elements

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, eligendi.

Lorem ipsum dolor sit amen, consectetur adipisicing elit. Nulla, eligendi.

p::first-letter { font-weight: bold; }
p span { font-weight: bold; }

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

I won’t talk about these one
::first-letter ::first-line ::selection
“Power of pseudo-elements” — @geoffreycrofte
Luxembourg JS 2020

What’s define those
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.

Principle
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.

Why are we gonna talk about it?

Yes, tell me why?
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.

“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

Basic syntax

Basic syntax

Basic syntax

Good to know
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.

Before & after what?

Before & after what?

Before & after what?

Before & after what?

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

In da content-box

Voici mon super contenu

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