nav {
    width: 80%;
    margin: 0 auto;
}

    /* By Dominik Biedebach @domobch */
    nav ul {
        list-style: none;
        text-align: center;
    }

        nav ul li {
            display: inline-block;
        }

            nav ul li a {
                display: block;
                padding: 15px;
                text-decoration: none;
                color: #aaa;
                font-weight: 800;
                text-transform: lowercase;
                margin: 0 10px;
            }

                nav ul li a,
                nav ul li a:after,
                nav ul li a:before {
                    transition: all .5s;
                }

                    nav ul li a:hover {
                        color: #555;
                    }




    /* stroke */
    nav.stroke ul li a,
    nav.fill ul li a {
        position: relative;
    }

        nav.stroke ul li a:after,
        nav.fill ul li a:after {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            width: 0%;
            content: '.';
            color: transparent;
            background: #7B191A;
            height: 1px;
        }

        nav.stroke ul li a:hover:after {
            width: 100%;
        }

    nav.fill ul li a {
        transition: all 2s;
    }

        nav.fill ul li a:after {
            text-align: left;
            content: '.';
            margin: 0;
            opacity: 0;
        }

        nav.fill ul li a:hover {
            color: #023f1c;
            z-index: 1;
        }

            nav.fill ul li a:hover:after {
                z-index: -10;
                animation: fill 1s forwards;
                -webkit-animation: fill 1s forwards;
                -moz-animation: fill 1s forwards;
                opacity: 1;
            }