Как сделать подсветку элементов меню?

Всем привет, мне нужно как то реализовать такую штуку: элементы меню должны быть подчеркнуты когда на них наводится пользователь, цветной полосой, подскажите пожалуйста, как такое можно сделать?

Тебе нужно просто задать border снизу и задать ему определенный цвет:

span {
font-size: 24px;
border-bottom: 2px solid rgba(255, 0, 0, .0);
}
span:hover {
border-bottom: 2px solid rgba(255, 0, 0, 1);
-webkit-transition: all;
-webkit-transition-duration: 600ms;
}

TAB1
TAB2

В части кода со стилями, в начале задаем размер символов в 24 пикселя, затем добавляем рамку внизу размером в два пикселя, сплошную, цвет задаем через rgba красный и одновременно с помощью последнего параметра rgba который отвечает за прозрачность, делаем элемент прозрачным, то есть не видимым, далее для того же селектора приписываем псевдоклас hover и прописываем практически ту же строку что мы указали ранее но последний параметр заменяем на 1, таким образом мы делаем видимой ту часть которую спрятали изначально, после этого задается плавность эффектов, что бы ничего резко не появлялось и не пропадало.