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

Question

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/

Leave a Comment Cancel reply