<div class="container">
  <button type="button">Scroll</button>
  <div class="scroll"></div>
</div>

body, html {
  background-color: #1D1E22;
  color: white;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.container {
  padding: 20px;
  width: 128px;  
}

button {
  position: relative;
  padding: 0 0 10px 0;
  border: none;
  background: none;
  color: white;
  font-size: 21px;
}

.scroll {
  width: 100%;
  display: block;
  overflow: hidden;
  &::after {
    content: '';
    width: 100%;
    bottom: 0;
    display: block;
    border-bottom: 1px solid white;    
    animation-name: swipe;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    transition: transform 2s;
    transform: translateX(-101%);
    will-change: transform;
  }
}

@keyframes swipe {
  0%   {transform: translateX(-101%);}
  25%  {transform: none;}
  75%  {transform: none;}
  100%  {transform: translateX(101%);}  
}