CSS code for underline style for menu items - css

Question

I would like to know the CSS code used to make the underline effect for the menu items of this website : https://www.kevin-missud-charpente.fr/
Thanks in advance.

Answer 1

this is better
body,html {
margin: 0;
font: bold 14px/1.4 'Open Sans', arial, sans-serif;
background: #fff;
}
ul {
margin: 150px auto 0;
padding: 0;
list-style: none;
display: table;
width: 600px;
text-align: center;
}
li {
display: table-cell;
position: relative;
padding: 15px 0;
}
a {
color: #000;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.15em;
display: inline-block;
padding: 15px 20px;
position: relative;
}
a:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: #000;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
a:hover:after {
width: 100%;
left: 0;
}
#media screen and (max-height: 300px) {
ul {
margin-top: 40px;
}
}
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Support</li>
</ul>
this is on hover underline effect

Answer 2

Here a link to codepen with the same underline animation.
https://codepen.io/Nerd/details/zBmAWV
HTML
<nav>
Hover me!
</nav>
CSS
nav {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a {
position: relative;
color: #000;
text-decoration: none;
font-size: 42px;
font-family: sans-serif;
&:hover {
color: #000;
&:before {
visibility: visible;
transform: scaleX(1);
}
}
&:before {
content: "";
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
}