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. The power of
    pseudo-elements
    A CSS Tale from ::before to ::after

    View full-size slide

  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 @

    View full-size slide

  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.

    View full-size slide

  4. What are those pseudo-elements?

    View full-size slide

  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?

    View full-size slide

  6. Pseudo-classes
    Lorem ipsum
    Lorem ipsum
    p:first-child {
    font-weight: bold;
    }
    Lorem ipsum
    Lorem ipsum
    p.first {
    font-weight: bold;
    }

    View full-size slide

  7. Pseudo-elements
    Lorem ipsum dolor sit amet,

    consectetur adipisicing elit.

    Nulla, eligendi.
    p::first-letter {
    font-weight: bold;
    }
    p span {
    font-weight: bold;
    }
    Lorem ipsum
    dolor sit amen, consectetur
    adipisicing elit. Nulla,
    eligendi.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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 and
    elements. They generating content, dash
    and numbers.
    Principle

    View full-size slide

  12. Why are we gonna talk about it?

    View full-size slide

  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?

    View full-size slide

  14. “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

    View full-size slide

  15. How to use ::before and ::after

    View full-size slide

  16. Basic syntax

    View full-size slide

  17. Basic syntax

    View full-size slide

  18. Basic syntax

    View full-size slide

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

    View full-size slide

  20. Before & after what?

    View full-size slide

  21. Before & after what?

    View full-size slide

  22. Before & after what?

    View full-size slide

  23. Before & after what?

    View full-size slide

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

    children in it.

    View full-size slide

  25. In da content-box
    Voici mon super contenu
    p::before {
    content: 'BEFORE';
    }
    p::after {
    content: 'AFTER';
    }
    BEFORELorem ipsum dolor sitAFTER

    View full-size slide

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

    View full-size slide

  27. Be careful with replaced content
    Pseudo-element doesn’t work with
    replaced elements, listed here.
    Moreover, , dispite their
    definition of non-replaced element
    (widgets) doesn’t work with pseudo-
    elements neither.









    ()
    Source MDN

    View full-size slide

  28. “Power of pseudo-elements” — @geoffreycrofte Luxembourg JS 2020
    Here are some values for content
    none
    normal
    Reset

    url()
    attr()
    counter([, ])<br/>Utilitaire<br/>open-quote<br/>close-quote<br/>no-open-quote<br/>no-close-quote<br/>Citation<br/>p::before {<br/>content: <value>;<br/>}<br/>

    View full-size slide

  29. Values for content

    div::before {
    content: 'Plop';
    }
    div::before {
    content: '';
    }
    div::before {
    content: '\f0ac';
    }
    Plop

    View full-size slide

  30. “Power of pseudo-elements” — @geoffreycrofte Luxembourg JS 2020
    Values for content
    url()
    .bruce::before {
    content: url(../images/lee.png);
    }

    View full-size slide

  31. The targeted element
    The height of
    the targeted element

    View full-size slide

  32. The targeted element.
    The resized
    pseudo-element
    area
    .bruce::before {
    content: url([…]);
    width: 30px;
    height: 30px;

    display: inline-block;
    }

    View full-size slide

  33. .bruce::before {
    content: url(../images/lee.png);
    width: 30px;
    height: 30px;

    display: inline-flex;
    } BUG ?
    BUG ?
    BUG ?

    View full-size slide

  34. .bruce::before {
    content: '';

    display: inline-block;

    background: url(../images/lee.png);

    background-size: contain;
    width: 30px;
    height: 30px;
    }

    View full-size slide

  35. Value for content
    attr()
    a[hreflang]::after {
    content: '(' attr(hreflang) ')';
    }

    View full-size slide

  36. Values for content
    counter()
    ol > li::before {
    counter-increment: myList;
    content: counter(myList) " – ";
    }

    View full-size slide

  37. You already use them…

    View full-size slide


  38. […floating stuff…]



    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
    then the technique has been revisited
    to work with a simple class.

    […floating stuff…]


    View full-size slide

  39. Clearfix
    This class add a pseudo-element that plays
    exactly the same role of an empty .
    Why? Because like so, the CSS part stay into
    your CSS code, no more empty that
    serves only a styling purpose.

    […floating…]

    ::after

    .clearfix::after {
    content: '';
    display: block;
    clear: both;
    }

    View full-size slide

  40. 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
    role="presentation">

    View full-size slide

  41. Your turn to play!
    bit.ly/luxjs-exercises

    View full-size slide

  42. Example of exercise
    Re-create this shape within a white rectangle
    using only the element provide in the
    file.
    Remember to break down this form into
    simpler shapes.
    bit.ly/luxjs-exercises

    View full-size slide

  43. Possible solution

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  47. Just for fun

    View full-size slide

  48. 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!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  52. 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?

    View full-size slide

  53. HTML Structure

    View full-size slide

  54. CSS Solution

    View full-size slide

  55. CSS Solution

    View full-size slide

  56. CSS Solution

    View full-size slide

  57. CSS Solution

    View full-size slide

  58. Fractured Text Effect
    Reproduce the fractured text effect with the
    things you know now about pseudo-elements.
    Inspired from an article by Mandy Michael.

    View full-size slide

  59. Let’s go further

    View full-size slide

  60. “Power of pseudo-elements” — @geoffreycrofte Luxembourg JS 2020
    Values for content
    url()
    .bruce::before {
    content: url(../images/lee.png);
    }

    View full-size slide

  61. Values for content
    url()
    .bruce::before {
    content: url(../images/lee.mov)

    / 'Bruce Lee in action';
    }

    View full-size slide

  62. “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';
    }

    View full-size slide

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

    View full-size slide

  64. mix-blend-mode magic!

    View full-size slide

  65. una.im/CSSgram

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  71. You can use pseudo-elements to create
    advanced drop-shadows.
    Demo
    Advanced Shadows
    bit.ly/CSSshadows

    View full-size slide

  72. You can animate the ouline of a button, and
    you don’t even need SVG to do so.
    Demo
    Snake Button
    bit.ly/snakebutton

    View full-size slide

  73. Demo
    Animated icon
    An icon is oftentime simple geometric
    elements. That’s really easy to animate.
    bit.ly/scrollicon

    View full-size slide

  74. Demo
    Image-link Caption
    When Stéphanie redesigned her portfolio, I
    build all the animation using pseudo-
    elements.
    StephanieWalter.design

    View full-size slide

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

    View full-size slide

  76. Demo
    Lightbox CSS Only
    Just for fun, I reproduce the Lightbox effect in
    CSS with pseudo-element en CSS function
    element().
    bit.ly/lightboxCSSonly

    View full-size slide

  77. Demo
    Fractured Text
    Another demo by Mandy Michael of a fractured
    text with the help of clip-path: polygon();
    bit.ly/fracturedtext

    View full-size slide

  78. “Power of pseudo-elements” — @geoffreycrofte Luxembourg JS 2020
    A pseudo-element ::before
    for an image

    View full-size slide

  79. Styled broken image
    img::before {

    content: 'Arf, can’t load';
    }
    img::after {

    content: "\f1c5" " " attr(alt);
    }

    View full-size slide

  80. Source : Styling Broken Images
    * alt displayed only if image

    dimensions allow it

    * * font-styling property are

    not applied
    Compatibility: broken image

    View full-size slide

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

    View full-size slide

  82. Source : Can I use
    Support: Pseudo-elements 98,24%
    Global users

    View full-size slide

  83. Source : Can I use
    Support: CSS Transitions 97,11%
    Global users

    View full-size slide

  84. Source : Can I use
    Support: Blend-mode ~91%
    Global users

    View full-size slide

  85. Source : Can I use
    Support: CSS Filter Effects 95,38%
    Global users

    View full-size slide

  86. Source : Can I use
    Support: Pointer Events 97.8%
    Global users

    View full-size slide

  87. Source : Can I use
    Support: Clip-path() 93.69%
    Global users

    View full-size slide

  88. Source : Can I use
    Support : CSS element() function 4,5%
    Global users

    View full-size slide

  89. Source : Accessibility support for CSS generated content
    Accessibility: Support

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  94. ::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?

    View full-size slide

  95. “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

    View full-size slide

  96. I don’t bite so far…
    Any question?

    View full-size slide

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

    View full-size slide