<ul>
  <li id="smallest">Smaller label</li>
  <li id="smaller">Slightly smaller label</li>
  <li id="extralong">Significantly extra-long label</li>
  <li id="tiny">tiny man</li>
  <li id="superduper">Even bigger extra long, super duper big man</li>
  <div id="highlight"></div>
</ul>

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');

body {
  display: flex;
  justify-content: center;
}

ul {
  font-family: 'Montserrat', sans-serif;
  position: relative;
  list-style: none;
  width: 800px;
  display: flex;
  overflow-x: scroll;
  white-space:nowrap;
  padding: 0;
}

li {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  vertical-align: middle;
  padding: 0.8rem 1.8rem;
  cursor: pointer;
  border-radius: 50px;
}

li:hover {
  background-color: gray;
}

#highlight{
  transition-property: all;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -10;
  position: absolute;
  min-width: 25px;
  min-height: 100%;
  border-radius: 50px;
  background-color: gold;
}

const defaultSelection = document.querySelector('#smallest')
const highlight = document.querySelector('#highlight')
setStyles(highlight, defaultSelection)

document.querySelectorAll('li').forEach(item => {
  item.addEventListener('click', event => {
    setStyles(highlight, event.target)
  })
})

function setStyles(elementToStyle, eventTarget) {
  elementToStyle.style.width = getStyles(eventTarget).w + 'px'
    elementToStyle.style.height = getStyles(eventTarget).h + 'px'
    elementToStyle.style.left = getStyles(eventTarget).pos + 'px'
}

function getStyles(target) {
  return {
    w: target.scrollWidth,
    h: target.scrollHeight,
    pos: target.offsetLeft
  }
}