How to target pseudo element (eg. :before, :after) in v3?

[n.watanabe]

Hi. I have a question about how to target :before element and run a tween on it, and need help to run my codepen demo.

 

I found some people have shown a demo targeting ".class:before"[1][2][3][4], and came across a website[5] that is apparently using GSAP and targeting :before element. However, I also found other people said it is impossible[6], and my codepen demo doesn't work. Can anyone fix my codepen to target :before element?

 

I'm using the latest version of GSAP ("gsap": "^3.9.1") with nextjs for my production environment. Thank you in advance.

 

[1] 

[2]

[3]

[4] 

[5] https://giginc.co.jp/

[6]

 

See the Pen MWrerqV?editors=1111 by asterisk37n (@asterisk37n) on CodePen.

[OSUblake]

Welcome to the forums @n.watanabe

 

There was the CSSRulePlugin, but it's very limited as you can only target rules and not elements. I would recommend using CSS variables instead.

 

See the Pen VwyjQEp by GreenSock (@GreenSock) on CodePen.

 

[n.watanabe]

Thank you so much. For people visiting this question, I leave a document about changing CSS variables.