Дмитрий Локшин

.navigation li {
    border-bottom: 2px solid transparent;
    transition: none;
}

.navigation li:hover {
    border-bottom: 2px solid white;
    transition: none;
}

Ответ на первый вопрос, чтобы не было "синих полос" - нужно просто запретить выделение и они пропадут, т.к. в данный момент они появляются при быстрых кликах, что означает выделение текста (два быстрых клика левой кнопкой мыши).

Тут kenwheeler.github.io/slick Смотреть Center Mode - подправите стили и готово.

Если я понял о чем идет речь, то так пойдет: https://jsfiddle.net/jn23yzk1/ ?

Если Вы по меню, то вот так: https://jsfiddle.net/lokdmt/6njzdtq8/
Если хотите выше или ниже, то регулируется в свойстве bottom: -15px;

P.S. Если ответ помог, не забываем отметить решением.

По быстрому реализовал https://jsfiddle.net/lokdmt/8pa675oL/
Дальше, думаю, уже сможете сами подправить что нужно, т.к. основной принцип показал.

Думаю Вам нужно вот такое: https://jsfiddle.net/lokdmt/rjwu39dr/1/
Ничего лишнего. Дата задается прям из html. Остается только немного стилизовать под себя.