he intentado mover el slider dependiendo en el elemento del que se hizo clic, pero no lo consigo. Consegui obtener el ancho del item para modificarlo respecto al contenido. Espero que puedan ayudarme, de antemano gracias
let items = document.querySelectorAll('.menu-item-category'),
slider = document.querySelector('.slider')
items.forEach((item, e) => {
item.addEventListener('click', () => {
console.log(e)
let getWidth = item.offsetWidth
slider.style.width = getWidth + 'px'
})
})
.category-results {
display: flex;
align-items: center;
position: relative;
}.menu-item-category:nth-child(1), .menu-item-category:nth-child(2) {
margin-right: 25px;
}.menu-item-category {
color: #262626;
font-size: 1.3em;
text-transform: capitalize;
height: 100%;
display: flex;
align-items: center;
cursor: pointer;
transition: color 300ms ease-in-out;
}.slider {
position: absolute;
height: 3px;
background: red;
width: 39%;
bottom: 0;
display: block;
}
<div class="category-results">
<div class="menu-item-category active">trending</div>
<div class="menu-item-category">text too loooong</div>
<div class="menu-item-category">test3</div>
<div class="slider" style="width: 81px;"></div>
</div>