GSAP Splittext won't include :before element in the animation

[Chromium 23 Likes (Newbie)]

As can be seen in the Codepen. The <li> elements are being animated via the Splittext and they have a :before element but that's not being animated as part of the text. Any idea how to include it in the animation?

 

On a side note, things get even more weird when the piece of code below is excluded.

ul li {
  display: flex;
}

 

See the Pen mdpzJrB by fuad-zeyad-tareq (@fuad-zeyad-tareq) on CodePen

[GreenSock 18,885 Likes (Superhero)]

Pseudo elements are not accessible in the DOM. In other words, they're completely unreachable by JavaScript. 

[Chromium 23 Likes (Newbie)]

Ah! Well that explains my failed attempts at animating them.

 

Seriously though, pseudo elements have been out for how long now?! Lol

[GreenSock 18,885 Likes (Superhero)]

Yeah, I don't think it's a matter of them being new - I think the browsers never planned on making them accessible since they're not "real" DOM elements 🤷‍♂️

[Chromium 23 Likes (Newbie)]

Yeah I think you're right. Seems shortsighted though as it leaves this random huge limitation given how far we've come now.

 

Thanks for the quick response anyhow. Saved me from wasting my time trying to animate these lol

[iDad5 215 Likes (Specialist)]

Not to contradict Jack, für all intents and purposes it it true that accessing pseudo Elements with JavaScript is not possible.

I found myself in a situation some time ago, where I had a very specific use case an I worked with window.getComputedStyle(element, ':before') to get the content and some other properties. In my case i was able to recreate the pseudo-element in a regular child element, place it while setting the original to invisible.

 

It was a hacky thing, as I wasn't able/supposed to rework the original HTML-output and it worked under the given conditions but might not work under others - at lest not in an acceptable way. 

 

In your case ist seems to me that It might not unworkable, but there are likely better solutions.