4 ms·
The `data-text` attribute is used to set the `content` of the `before` and `after` pseudo-elements[0], effectively creating two "clones" of the original text. T
by ericwood 5y ago
The `data-text` attribute is used to set the `content` of the `before` and `after` pseudo-elements[0], effectively creating two "clones" of the original text. These get their own text shadows and clipping animations applied, which creates the effect. You can grab attributes from elements using `attr`[1], which they're using alongside `content`.
[0] https://developer.mozilla.org/en-US/docs/Web/CSS/::after https://developer.mozilla.org/en-US/docs/Web/CSS/::after
[1] https://developer.mozilla.org/en-US/docs/Web/CSS/attr https://developer.mozilla.org/en-US/docs/Web/CSS/attr()
- azemetre 5y agoThanks for the explanation, I've never seen the attr() property before. A lot of similar codepens I've seen in the past, that do fancy stylings, are suddenly making sense. I always struggle to change my mental model about css to be more expressive, but now many wheels are starting to turn.
- ericwood 5y agoGlad I could help! This is definitely weirder CSS territory but it unlocks some really wonderful techniques.