CSS
body, html {
font-family: sans-serif;
text-transform: uppercase;
font-weight: 900;
height: 100%;
}
nav {
height: 100%;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
li {
display: inline-block;
margin: 0;
padding: 0;
float: left;
}
li:after{
content: '-'; /* remplace separator */
position: inherit;
text-align: center;
display: inline-block;
padding: 0 15px; /* marge size */
}
li:last-child:after{
content: '';
}
a {
display: inline-block;
position: relative;
color: #000000;
text-decoration: none;
}
* {
background-repeat: no-repeat;
}
a:hover::before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
a::before {
content: "";
position: absolute;
width: 100%;
height: 4px;
bottom: -4px;
left: 0;
background-color: #000000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
transform-origin: 0 0;
}
