Слайды и текст этой презентации
Слайд 1
The power of
pseudo-elements
A CSS Tale from ::before to ::after
Слайд 2
Geoffrey Crofte
Lead (System) Designer / UX Designer @
@geoffreycrofte
geoffrey.crofte.fr/en/ creativejuiz.fr/blog/en
“Power of Pseudo-elements” — @geoffreycrofte
Luxembourg JS - 2020
Слайд 3
Overview
What are they?
Why are we gonna talk about it? Some basics: how to use them? Demo and code examples.
Go further, together.
Слайд 4
What are those pseudo-elements?
Слайд 5
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.
Слайд 6
Pseudo-classes
p:first-child {
font-weight: bold;
}
p.first {
font-weight: bold;
}
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Слайд 7
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;
}
Слайд 8
Which ones?
::before
::after
“Power of pseudo-elements” — @geoffreycrofte
Luxembourg JS 2020
Слайд 9
I won’t talk about these one
::first-letter
::first-line
::selection
“Power of pseudo-elements” — @geoffreycrofte
Luxembourg JS 2020
Слайд 10
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.
Слайд 11
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.
Слайд 12
Why are we gonna talk about it?
Слайд 13
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.
Слайд 16
“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
Слайд 17
How to use ::before and ::after
Слайд 21
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.
Слайд 22
Before & after what?
Слайд 23
Before & after what?
Слайд 24
Before & after what?
Слайд 25
Before & after what?
Слайд 26
Before and after the content of an element, within the content-box, no matter how many children in it.
Before & after what?
::before
::after
Слайд 27
In da content-box
Voici mon super contenu
p::before {
content: 'BEFORE';
}
p::after {
content: 'AFTER';
}
BEFORELorem ipsum dolor sitAFTER
Слайд 28
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.
Слайд 29
Be careful with replaced content
Слайд 30
p::before { content:
;
}
Here are some values for content
Reset
Utilitaire
Citation
none
normal
url()
attr() counter([,