CSS Underline Navbar

HTML
<nav> <ul> <li><a href="">link</a></li> <li><a href="">link</a></li> <li><a href="">link</a></li> <li><a href="">link</a></li> <li><a href="">link</a></li> </ul> </nav>
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; }
JAVASCRIPT
Expand for more options Login