Как реализовать нижнее подчеркивание активного пункта меню?

Question

[Карен Бичахчян]

Уважаемые, подскажите как реализовать подобное подчеркивание при наведении на пункт меню. Погуглил, ничего путевого не нашел. Стыдно за вопрос.

Answer 1

[Александр Таратин]

htmlbook.ru/css/border-bottom
https://jsfiddle.net/QW01_01/sgdw2ac2/

Answer 2

[karbayev]

Вот такое решение использую на одном из проектов
Подчеркивание с центра при наведении мышью
a.linkmenucategory {
display: inline-block;
color: #000000;
line-height: 2;
text-decoration: none;
cursor: pointer;
position: relative;
}
a.linkmenucategory:after {
display: block;
content: "";
background-color: #006633;
height: 4px;
width: 0%;
left: 50%;
position: absolute;
-webkit-transition: width .2s ease-in-out;
-moz--transition: width .2s ease-in-out;
transition: width .2s ease-in-out;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);
}
a.linkmenucategory:hover:after,
a.linkmenucategory:focus:after {
width: 100%;
}
Может пригодится.