/* add in html to each nav-item or menu-item that you want the effect */

class="flash-underline"

/* put in javascript */

    $(".flash-underline").append("<div class='flash-underline-indicator flash-underline-indicator-inactive'></div>");
    $(".flash-underline").hover(
        function(event) {
            $(this).children(".flash-underline-indicator")
                .removeClass("flash-underline-indicator-inactive")
                .addClass("flash-underline-indicator-active");
        },
        function(event) {
            $(this).children(".flash-underline-indicator")
                .removeClass("flash-underline-indicator-active")
                .addClass("flash-underline-indicator-inactive");
        }
    );

/* put in main.css */

.flash-underline-indicator {
	height: 2px;
	margin: auto;
	transition: width 0.5s, background 0.5s;
}
.flash-underline-indicator-inactive {
	width: 0;
}
.flash-underline-indicator-active {
	width: 100%;
	background: black;
}