[proexploit]

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]

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