
Uncommon Use Cases for Pseudo Elements - huntermeyer
https://ishadeed.com/article/unusual-use-cases-pseudo-elements
======
theandrewbailey
I've done the fade for text on images. Recently, I've implemented background
text with ::before:

    
    
      .background-text[data-background-text]{
        position: relative;
      }.background-text[data-background-text]::before{
        font-family: sans-serif;
        color: #000;
        font-size: 350%;
        line-height: 1em;
        text-align: justify;
        z-index: -1;
        position: absolute;
        top: -0.5em;
        left: 0;
        height: calc(100% + 0.5em);
        width: 100%;
        overflow: hidden;
        content: attr(data-background-text);
        text-rendering: optimizespeed;
      }

