CSS Transition - Only one way

by Ben Clayton

HTML

<div class="hoverme">HoverMe</div>

CSS

.hoverme {
  position: relative;
  left: 100px;
  top: 100px;
}

.hoverme::after {
  display: block;
  position: absolute;
  content: "Y";
  font-size: 36px;
  top: -80px;
  left: 40px;
  transition: all 1s;
}

.hoverme:hover::after {
  top: -30px;
  transition: none;
}

.hoverme::before {
  display: block;
  position: absolute;
  content: "X";
  font-size: 36px;
  top: -80px;
  left:0px;
  transition: none;
}

.hoverme:hover::before {
  top: -30px;
  transition: all 1s;
}