Dynamic Bottom Line

動態底線

by wllai2001

HTML

<div>
  TEST
  <div class='bottom-line'></div>
</div>

<div>
  TEST
  <div class='bottom-line'></div>
</div>

CSS

.bottom-line{
  width:0vw;
  border-bottom:3px solid #f00;
  transition: width 2s;
}

.bottom-line.active{
  width:100vw;
}

JavaScript

document.addEventListener("DOMContentLoaded", function(event) { 
  var t = document.getElementsByClassName('bottom-line');
  t[0].classList.add('active');
  t[1].classList.add('active');
});