Menu Hover Effect

HTML
<div class="container"> <ul class="list"> <li class="list__item--yellow"> <span>Home</span> </li> <li class="list__item--blue"> <span>About us</span> </li> <li class="list__item--red"> <span>Contact</span> </li> </ul> </div>
SCSS
body { display: table; width: 100%; height: 100vh; margin: 0; background: #222; font-family: 'Roboto Condensed', sans-serif; font-size: 26px; font-weight: 600; letter-spacing: 5px; text-transform: uppercase; } .container { display: table-cell; vertical-align: middle; text-align: center; width: 600px; } .list { list-style: none; margin: 0; padding: 0; } li { display: inline-block; padding: 0 20px; } span { position: relative; display: block; cursor: pointer; } .list__item--yellow { color: #FFC56C; } .list__item--blue { color: #6EC5E9; } .list__item--red { color: #FF5959; } span { &:before, &:after { content: ''; position: absolute; width: 0%; height: 4px; bottom: -2px; margin-top: -0.5px; background: #fff; } &:before { left: -2.5px; } &:after { right: 2.5px; background: #fff; transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); } &:hover { &:before { background: #fff; width: 100%; transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); } &:after { background: transparent; width: 100%; transition: 0s; } } }
JAVASCRIPT
Expand for more options Login