CODEWITHSUNDEEP
csscss-transitions
user1680771
user1680771

Reputation:

CSS (transition) after a pseudo element - how to transition content that shows on hover

div {
  transition: after 3s;
  -webkit-transition: after 3s;
}

div:hover:after {
  content: "- positive!";
}
<div>Test</div>

I have this sample code above. I'm trying to use 'transition' so that the text: '- positive!' takes 3 seconds to slide/show up. But it isn't working.. How to fix it?

Upvotes: 38

Views: 78270

Answers (1)

3dgoo
3dgoo

Reputation: 15794

after is not a valid value of transition.

Instead put transition as a property of the :after selector.

div:after {
  content: " - positive!";
  position: relative;
  opacity: 0;
  top: -20px;
  -webkit-transition: all 3s;
  transition: all 3s;
}

div:hover:after {
  opacity: 1;
  top: 0px;
}
<div>Test</div>

You can also have a different transition on the hover in and hover out state. This allows us to have a delay to show the pseudo-element but no delay to hide it.

div:after {
  content: " - positive!";
  position: relative;
  opacity: 0;
  top: -20px;
  -webkit-transition: all 250ms;
  transition: all 250ms;
}

div:hover:after {
  opacity: 1;
  top: 0px;
  -webkit-transition: all 3s;
  transition: all 3s;
}
<div>Test</div>

Here is a list of browsers that support transitions on pseudo elements: http://css-tricks.com/transitions-and-animations-on-css-generated-content/

Upvotes: 65

Related Questions