3 ms·
It's not replaced, it's in addition to the text. The HTML gives you one copy in black, then ::before & ::after are used to create copies in red and lime green.
by proexploit 5y ago
It's not replaced, it's in addition to the text. The HTML gives you one copy in black, then ::before & ::after are used to create copies in red and lime green. Partially showing those copies is what give you the glitch effect.
`::before & ::after` are pseudo-elements and a very common way of creating independently styleable elements when doing CSS effects like this
`content` is a property you can use to add text to those elements (he could have also just written `content: 'Artificial Truth';` if he preferred - having it as a data-attribute puts it right next to the "real" text and makes things easier to maintain)
`attr(data-text)` sets the value of content to the value of an attribute of the HTML. data-* is a common convention for creating value that aren't used for display. It is not possible, to my knowledge, to access the text contained within the `<h1>` with CSS only, hence the above choices.
- azemetre 5y agoThat makes sense! Your explanation on why using the data attribute can enable more advance trickery just clicked multiple things in my brain when remembering other fancy codepens.