Nav hover effect #2

bottom bar expand from center

by Trina Lu

HTML

<script src="https://fonts.googleapis.com/css?family=Open+Sans"></script>
<nav>
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Works</li>
  </ul>
</nav>

SCSS

$blue:  rgb(72, 110, 183);
@mixin transition {
    transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
}

nav {
    font-family: 'Open Sans', sans-serif;
}

li {
    display: inline-block;
    padding: 15px 15px;
    cursor: pointer;
    position: relative;
    &:after {
        content: '';
        position: absolute;
        width: 0;
        bottom: 0;
        left: 50%;
        height: 2px;
        display: block;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        background: $blue;
        @include transition;
    }
    &:hover:after {
        width: 100%;
    }
}