Edit in JSFiddle

.arrow{
  overflow: hidden;
  position: relative;
  width: 19px;
  height: 36px;
  transition: padding 0.3s ease;
  
  &:hover{
    cursor: pointer;
    padding-left: 10px;
  }
  
  &:before,
  &:after{
    content: "";
    position: absolute;
    right: 0;
    width: 5px;
    height: 40px;
    background-color: #f02;
  }
  
  &:before{
    bottom: 50%;
    transform-origin: bottom right;
    transform: rotate(-35deg);
  }
  
  &:after{
    top: 50%;
    transform-origin: top right;
    transform: rotate(35deg);
  }
}