kelweb

  Html. <h1 class="ml1">   <span class="text-wrapper">     <span class="line line1"></span>     <span class="letters">THURSDAY</span>     <span class="line line2"></span>   </span> </h1> <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script> Css .ml1 {   font-weight: 900;   font-size: 3.5em; } .ml1 .letter {   display: inline-block;   line-height: 1em; } .ml1 .text-wrapper {   position: relative;   display: inline-block;   padding-top: 0.1em;   padding-right: 0.05em;   padding-bottom: 0.15em; } .ml1 .line {   opacity: 0;   position: absolute;   left: 0;   height: 3px;   width: 100%;   background-color: #fff;   transform-origin: 0 0; } .ml1 .line1 { top: 0; } .ml1 .line2 { bottom: 0; } Java. // Wrap every letter in a span var textWrapper = document.querySelector('.ml1 .letters'); textWrapper.innerHTML = textWrapper