The Power of CSS Pseudo Elements

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.

5b6a2bd86ef643786a381a212e0ef2f1?s=128

Geoffrey Crofte

August 05, 2020
Tweet

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?
  14. None
  15. None
  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

  69. None
  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

  86. None
  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
  92. None
  93. None
  94. None
  95. None
  96. None
  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
  110. None
  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 @