The Power of CSS Pseudo Elements

Pseudo-elements in CSS are not really well known. A feature from before 2011, but yet, front-end developers don't know how to unleash their powers.
In these slides prepared for Luxembourg JS (meetup - demo) and DevFest / GDG Nantes (workshop) you will find demonstrations and exercises to practice your pseudo-elements skills.

If you want me to facilitate this Workshop, contact me on Twitter. (info in the slides deck)
I won’t hide it to you: the excercises need a facilitator with high skills in CSS.

Transcript

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