.container
    .main-navigation
        a(href='').item(style='opacity: 1') Link1
        a(href='').item Link2
        a(href='').item Link3
        a(href='').item Link4
        a(href='').item Link5
        svg.underline(viewBox='0 0 100 1')
            line(id='line' x1='0' x2='100' y1='0' y2='0' stroke='#f00' stroke-width='2' stroke-dasharray='20 80' )
View Compiled
@import url('https://fonts.googleapis.com/css?family=Acme');


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: ~'calc( 14px + (20 - 14) * ((100vw - 400px) / ( 800 - 400)))';

    @media screen and (max-width: 400px) {
        font-size: 14px;
    }

    @media screen and (min-width: 800px) {
        font-size: 20px;
    }
}

body {
    background: #260F26;
}

.container {
    width: 90%;
    max-width: 800px;
    margin: 3rem auto;
    box-shadow: 0 0 1rem rgba(0, 0, 0, .5);
}

.main-navigation {
    display: table;
    position: relative;
    width: 100%;
    font-family: 'Acme', sans-serif;
    background: #361F36;
    
    > .item {
        display: table-cell;
        text-align: center;
        line-height: 3rem;
        cursor: pointer;
        text-decoration: none;
        color: #fff;
        opacity: .6;
        
        &:focus {
            outline: none;
        }
        
        &:hover,
        &:focus {
            opacity: 1;
        }
    }
    
    > .underline {
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: .4rem;
    }
}
View Compiled
let currentAnimation = null;
let items = document.querySelectorAll('.item'),
    last = 0;

let moveTo = (index) => {
    if (currentAnimation) {
        currentAnimation.pause();
    }

    currentAnimation = anime({
        targets: '#line',
        strokeDashoffset: [-(100 / items.length) * index],
        stroke: `hsl(${ (index * 360 / items.length) % 360 }, 100%, 50%)`,
        easing: 'easeInOutSine',
        duration: 300
    });
    
    anime({
        targets: items[last],
        opacity: 0.6,
        easing: 'easeInOutSine',
        duration: 100
    });

    anime({
        targets: items[index],
        opacity: 1,
        easing: 'easeInOutSine',
        duration: 100
    });
    
    last = index;
};

[].forEach.call(items, (item, index) => {
    item.addEventListener('mouseover', moveTo.bind(this, index));
    item.addEventListener('focus', moveTo.bind(this, index));
});


// -----------------

setInterval(() => {
    moveTo(Math.floor(Math.random() * items.length));
}, 1000);
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js