JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>
    9:00-20:00
    <span data-opening-range="9-20"></span>
  </li>
  <li>
    9:00-16:00
    <span data-opening-range="9-16"></span>
  </li>
  <li>
    10:00-15:00
    <span data-opening-range="10-15"></span>
  </li>
</ul>

CSS

ul {
  max-width: 300px;
  
  margin: 0;
  padding: 30px 40px;
  
  background: #fff;
  list-style: none;
}

li {
  position: relative;
  margin-bottom: 16px;
  padding: 8px 0;
}

span {
  width: 0;
  height: 6px;
  
  position: absolute;
  top: 100%;
  
  background: #111;
  
  transition: width 1s ease-in-out;
}

JavaScript

setOpeningLine = function(totalRange) {

  var totalHours = totalRange[1] - totalRange[0],  
      lines = document.querySelectorAll('[data-opening-range]');

  Array.prototype.forEach.call(lines, function(el) {

    var targetRange = el.getAttribute('data-opening-range').split('-');

    el.style.width = (targetRange[1] - targetRange[0]) / totalHours * 100 + '%';
    el.style.left = (targetRange[0] - totalRange[0]) / totalHours * 100 + '%';

  });

};

//

setOpeningLine([9, 20]);