Uncommon Use Cases for Pseudo Elements

I&#x27;ve done the fade for text on images. Recently, I&#x27;ve implemented background text with ::before:<p><pre><code> .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; }</code></pre>