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

[Chromium]

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]

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

[Chromium]

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

 

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

[GreenSock]

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]

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]

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.