simple hover action

by uto usui

HTML

<h1>hover action</h1>
<a class="">
  <span>appa</span>
  <span>appapa</span>
</a>

SCSS

span {
  display: block;
  width: 0;
  overflow: hidden;
  transition: .4s;
  //
  &:nth-of-type(1) {
    a:hover & {
      width: 3em;
    }
  }
  &:nth-of-type(2) {
    a:hover & {
      width: 4em;
    }
  }
}

a {
  display: inline-block;
  width: 100px;
  cursor: pointer; 
  color: white;
  background-color: black;
}