Nav hover effect #1

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.1s ease-in;
    -webkit-transition: all 0.1s 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: 100%;
        bottom: 0;
        left: 0;
        height: 0;
        display: block;
        background: $blue;
        @include transition;
    }
    &:hover:after {
        height: 5px;
    }
}