<ul class="foo"> <li class="foo">FOO</li> <li class="bar">BAR</li></ul>ul { position: relative; display: table; table-layout: fixed; width: 100%; border-bottom: 1px solid gray;}ul::after { content: ''; position: absolute; bottom: 0; width: 66px; margin-left: -33px; border-bottom: 2px solid blue; transition: left 1s}ul.foo::after { left: 25%;}ul.bar::after { left: 75%;}li { display: table-cell; width: 50%; text-align: center; line-height: 3; transition: left 1s}ul.foo li.foo,ul.bar li.bar { color: blue;}xxxxxxxxxxvar $list = document.querySelector('ul')var $items = [].slice.call(document.querySelectorAll('li'))for (var i = 0, l = $items.length; i < l; i++) { var $item = $items[i] $item.addEventListener('click', event => $list.className = event.currentTarget.className)}