Jump to content
Search Community

CSSRule Plugin not animating Pseudo Element ::before

Jonathan test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello.. Thanks ahead of time for any help!


Im trying to animate a pseudo-element with the CSSRulePlugin. But it will only animate the old syntax of :before instead of the new CSS3 double colon syntax ::before.


The double colon :: is supposed to help in CSS3, with separating the difference between pseudo classes : and pseudo elements ::.


My example (click Run):

See the Pen enhFy by jonathan (@jonathan) on CodePen



var rule = CSSRulePlugin.getRule(".myClass:before"),
    rule2 = CSSRulePlugin.getRule(".myClass2::before");

TweenMax.to(rule, 2, {cssRule:{ backgroundColor:"#F43C09" }});
TweenMax.to(rule2, 2, {cssRule:{ backgroundColor:"#F43C09" }});


.myClass:before {
    content:"This content is a Pseudo Element ";

.myClass2::before {
    content:"This content is a Pseudo Element ";

In my above example you will see both :before and ::before. When i try to animate the ::before i get this error in the console:

uncaught exception: Cannot tween a null target.

Am i missing something?


Thank you for any assistance! ;)

Link to comment
Share on other sites

Hmm, using double colons for CSS1/2 pseudo elements (:before, :after, :first-line & :first-letter) is only advised if you don't give a toot about IE <= 8, since older browsers only support single colons in the stylesheets. Even in the CSS3 spec, browsers have to support the single colon notation for these elements indefinitely for compatibility with valid CSS2 stylesheets.


Any new pseudo elements in CSS3 require the :: notation, but as far as I am aware, they haven't added any new pseudo elements yet? Things like ::selection aren't in the spec and are browser dependant.

Link to comment
Share on other sites

Thank you both for responding!


So this looks like an IE bug or the weird way IE handles CSS3 pseudo-element double colon syntax support. I figured it had to be a stupid IE issue..


Buy regarding IE adding an extra ":" colon, I have 2 questions

  1. Was the IE version that was adding an extra colon ":" IE9 and above ?
  2. Is there a way to first check if the browser is IE9 and above, and then parse non IE browsers differently .. or is that just silly ?

I will be more than happy to help research why IE adds the extra colon! Hopefully we can find a reason for this behavior.. but of course IE doesn't like to play nice with the rest of the browsers.


I can certainly see how this can be frustrating when trying to debug IE and pseudo-elements. In IE9 both single and double colon pseudo-elements are ignored in Quirks Mode.


But if this HTML5 doctype is used:

// standards 
<!DOCTYPE html>

Then IE9 will honor both single and double colons due to the doctype ensuring standards mode in the browser.


I do appreciate both of you for your fast reply :)


Going forward the new double colon syntax is encouraged:

Like Jamie talked about above, the Non Standard Pseudo Element that was added to the CSS3 Candidate Recommendation phase, and then was later removed:

Thanks again for the help!


Oh IE, why must you be so difficult?  :( 


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...