Navigation Underline

nav_underline.css

.underlined-example-wrapper {
  padding: 30px;
  background-color: #7E789B;
  display: inline-block;
}

.underlined-example {
	padding: 6px;
    position: relative;
	color: #fff;
	text-decoration: none;
	font-size: 16px;
    display:inline-block;
	font-family: 'Work Sans', sans-serif;
	font-weight:400;
}

.underlined-example:hover {
	color: #fff;
}

.underlined-example:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 1px;
	bottom: 0;
	left: 0;
	background-color: #fff;
    visibility: hidden;

    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
  
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
}

.underlined-example:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
}