Leon Leon - 18 days ago 6
CSS Question

Change content property of pseudo element within CSS animation

I was wondering if anyone knows a way to change the content of a pseudo element (

:before
or
:after
) within a CSS animation.

It doesn't seem to be working in my fiddle, but maybe there's another way: http://jsfiddle.net/xfrfnav1/

Answer

Interesting suggestion, but apparently the browser (Chrome in my case) ignores the content. Makes a little sense. After all, it is for an animation, and the property is 'morphed' from one value to another gradually, which is not possible with content. Still, it would be nice of it worked.

A possible solution: put all the dots in there already and change the width. If you like, you can put the text 'loading' in :before (or in the div itself) and the dots in :after, so you can easily animate it from 0 to any desired width:

div:before { 
    content:"Loading"; 
    display: inline-block;
    overflow: hidden; /* Weird baseline behavior without this */
} 
div:after { 
    content:"......................."; 
    display: inline-block;
    overflow: hidden; /* Hide the dots */
    -webkit-animation: loading 4s linear 0 infinite;
} 

@-webkit-keyframes loading {
    0% { width: 0;} /* Only from and to are needed */
    100% { width: 3em;}
}

Fiddle