Add underline to current nav item

/*=========================================================
=            ADD UNDERLINE TO CURRENT NAV ITEM            =
=========================================================*/
// https://generatepress.com/forums/topic/menu-items-underline/
@media scren and ( min-width: 769px ) {
	.main-navigation li a:after {
		content: "";
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		display: block;
		bottom: 18px;
		width: 0;
		transition: .7s width ease;
	}
	.main-navigation .main-nav ul.menu > li[class*="current-menu-"]:not(.nav-button-solid):not(.nav-button-border) > a:after,
	.main-navigation .main-nav ul.menu > li:hover:not(.nav-button-solid):not(.nav-button-border) > a:after,
	.main-navigation .main-nav ul.menu > li.sfHover:hover:not(.nav-button-solid):not(.nav-button-border) > a:after {
		width: 62%;
		border-bottom: 2px solid #ffffff;
		position: relative;
	}
}