How to implement an underscore on the active menu item?

Question

css

Dear, tell me how to implement such an underline when hovering over a menu item. Googled it, didn't find anything. Shame on the question.

Answer 1

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

Answer 2

Here is a solution I use on one of the projects
Underline from the center when hovering with the mouse
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%;
}
May come in handy.