The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Opacity Transition on pseudo element in all browsers not working…but…!!!

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #155448

    I have an element that I am setting opacity to it’s :before element using a transition.
    I am using SCSS for my css.

    Here’s a codepen dealie

    I’ve read on Google that Chrome didn’t support transitions on pseudo elements at one time, but was fixed up awhile ago. I’m using Chrome v 30.x
    I also tried it out on Firefox and Safari with no luck.

    Now, the weird part!
    If I open up dev tools and set the item to :hover, I can deselect the “opacity” style in the :before element. When I do this, the transition happens! I can’t figure out why it happens when I manually do this but not when I try it through the CSS.

    Any ideas and flaming of how I’m doing this is welcome! :)



    You have no generated content for the initial state so opacity doesn’t get animated.

    e.g. content:” “;

    .placeholder:before {
    content:” “;
    opacity: 0;
    -webkit-transition: opacity 500ms ease-in;
    -moz-transition: opacity 500ms ease-in;
    -o-transition: opacity 500ms ease-in;
    transition: opacity 500ms ease-in;


    Just to rephrase @paulob‘s answer because it’s a little unclear:

    Sorry, it was a bit of a short explanation wasn’t it :)


    Wow… I can’t believe I didn’t pick up on this :(
    Thank you tons for the help!

    Cheers guys!

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.