burger menu

Menu.html

<div class="Menu">
  <div class="Menu-line"></div>
  <div class="Menu-line"></div>
</div>

Menu.scss

$width: 30px;
$color: rgba(0, 0, 0, 0.5);
$space-between: 10px;

.Menu {
  cursor: pointer;
  width: $width;
  height: $width;
  display: flex;
  flex-direction: column;
    
  &:hover {
    .Menu-line {
      display: none;
      
      &:first-of-type {
        display: block;
        
        &:after {
          top: $width/2;
          transform: rotate(45deg);
        }  
      }
      
      &:last-of-type {
        display: block;
        
        &:after {
          top: 0;
          transform: rotate(-45deg);
        }  
      }
    }
  }
  
  &-line  {
    position: relative;
    flex-grow: 1;
    display: block;

    &:first-of-type {
      &:after {
        bottom: $space-between/2;
      }
    }
    
    &:last-of-type {
      &:after {
        top: $space-between/2;
      }
    }
    
    &:after {
      top: 50%;
      position: absolute;
      content: " ";
      width: 100%;
      border-bottom: 1px solid $color;
      transition: transform 200ms cubic-bezier(0.4, 0.01, 0.17, 0.99),
        top 100ms linear,
        bottom 100ms linear;
    }
  }
}