Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Geoffrey Crofte

August 05, 2020
Tweet

More Decks by Geoffrey Crofte

Other Decks in Programming

Transcript

  1. “Power of Pseudo-elements” — @geoffreycrofte Luxembourg JS - 2020 Geoffrey

    Crofte @geoffreycrofte geoffrey.crofte.fr/en/ creativejuiz.fr/blog/en Lead (System) Designer / UX Designer @
  2. Overview What are they?
 Why are we gonna talk about

    it?
 Some basics: how to use them?
 Demo and code examples.
 Go further, together.
  3. 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?
  4. 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; }
  5. 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>
  6. “Power of pseudo-elements” — @geoffreycrofte Luxembourg JS 2020 I won’t

    talk about these one ::first-letter ::first-line ::selection
  7. 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
  8. 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
  9. 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?
  10. “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
  11. 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
  12. Before & after what? ::before ::after Before and after the

    content of an element, within the content-box, no matter how many
 children in it.
  13. In da content-box <p>Voici mon super contenu</p> p::before { content:

    'BEFORE'; } p::after { content: 'AFTER'; } BEFORELorem ipsum dolor sitAFTER
  14. 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.
  15. 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
  16. “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>; }
  17. Values for content <string> div::before { content: 'Plop'; } div::before

    { content: ''; } div::before { content: '\f0ac'; } Plop
  18. “Power of pseudo-elements” — @geoffreycrofte Luxembourg JS 2020 Values for

    content url() .bruce::before { content: url(../images/lee.png); }
  19. The targeted element. The resized pseudo-element area .bruce::before { content:

    url([…]); width: 30px; height: 30px;
 display: inline-block; }
  20. <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>
  21. 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; }
  22. 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>
  23. 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
  24. 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.
  25. 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.
  26. 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.
  27. 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!
  28. 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.
  29. 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.
  30. 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.
  31. 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?
  32. Fractured Text Effect Reproduce the fractured text effect with the

    things you know now about pseudo-elements. Inspired from an article by Mandy Michael.
  33. “Power of pseudo-elements” — @geoffreycrofte Luxembourg JS 2020 Values for

    content url() .bruce::before { content: url(../images/lee.png); }
  34. “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'; }
  35. 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
  36. 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
  37. 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.
  38. 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.
  39. 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.
  40. 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.
  41. You can animate the ouline of a button, and you

    don’t even need SVG to do so. Demo Snake Button bit.ly/snakebutton
  42. Demo Animated icon An icon is oftentime simple geometric elements.

    That’s really easy to animate. bit.ly/scrollicon
  43. Demo Image-link Caption When Stéphanie redesigned her portfolio, I build

    all the animation using pseudo- elements. StephanieWalter.design
  44. 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
  45. Demo Lightbox CSS Only Just for fun, I reproduce the

    Lightbox effect in CSS with pseudo-element en CSS function element(). bit.ly/lightboxCSSonly
  46. Demo Fractured Text Another demo by Mandy Michael of a

    fractured text with the help of clip-path: polygon(); bit.ly/fracturedtext
  47. Styled broken image img::before {
 content: 'Arf, can’t load'; }

    img::after {
 content: "\f1c5" " " attr(alt); }
  48. Source : Styling Broken Images * alt displayed only if

    image
 dimensions allow it
 * * font-styling property are
 not applied Compatibility: broken image
  49. 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
  50. 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
  51. 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
  52. 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
  53. 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
  54. ::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?
  55. “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
  56. “Power of Pseudo-elements” — @geoffreycrofte Luxembourg JS - 2020 Geoffrey

    Crofte @geoffreycrofte geoffrey.crofte.fr/en/ creativejuiz.fr/blog/en Lead (System) Designer / UX Designer @