[resolvido] Fazendo um Hover estilizado

Front-end CSS
#1

bom dia galera, minha duvida é a seguinte.
no site da caelum tem um efeito muito bonito no menu, o Hover quando passo o mouse surgi uma linha que vai crescendo abaixo do menu. Ja bati cabeça mais não conheço a propriedade que faz esse efeito. vocês poderiam me da essa força please.

#2

O código é esse:

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Testes CSS</title>
	
	<style>
		* {
			padding: 0;
			margin: 0;
			box-sizing: border-box;
			font-family: Roboto,"Segoe UI",sans-serif;
			-webkit-font-smoothing: antialiased;
		}
		
		.menuPrincipal {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100%;
		}
		
		.menuPrincipal {
			visibility: visible;
		}
		
		dl, ol, ul {
			list-style: none;
		}
		
		ul, menu, dir {
			display: block;
			list-style-type: disc;
			-webkit-margin-before: 1em;
			-webkit-margin-after: 1em;
			-webkit-margin-start: 0px;
			-webkit-margin-end: 0px;
			-webkit-padding-start: 40px;
		}
		
		.menuPrincipal-item {
			display: inline-block;
			overflow: hidden;
		}
		
		a {
			text-decoration: none;
			color: inherit;
		}
		
		.menuPrincipal-link--active:after, .menuPrincipal-link:focus:after, .menuPrincipal-link:hover:after {
			transform: translateX(0);
		}
		
		.menuPrincipal-link {
			text-transform: uppercase;
			text-decoration: none;
			color: #414449;
			font-size: .8em;
			font-family: "Roboto Condensed";
			letter-spacing: 1.6px;
			line-height: 2.5em;
			padding: .5em .1em;
			transition: .5s;
			overflow: hidden;
			position: relative;
		}
		
		.menuPrincipal-link:after {
			content: '';
			display: block;
			position: absolute;
			bottom: 0;
			transform: translateX(-100%);
			transition: .5s;
			height: 2px;
			background-color: #3b89da;
			width: 100%;
		}
	</style>
</head>

<body>
	<ul class="menuPrincipal">
		<li class="menuPrincipal-item">
			<a href="#" class="menuPrincipal-link ">Cursos</a>
		</li>
	</ul>
</body>

</html>

O segredo está no elemento after que é implicito ao elemento a (link). O after está definido no css como absoluto (class: .menuPrincipal-link:after) e possui o atributo transform para -100%, ou seja, ficará 100% de fora da visão relativa ao elemento a (pois after é filho do elemento a).

A mágica está aqui:

.menuPrincipal-link--active:after, .menuPrincipal-link:focus:after, .menuPrincipal-link:hover:after {
	transform: translateX(0);
}

No evento hover, o transform será alterado de -100% para 0, ou seja, ficará totalmente visível em relação ao elemento a.

#3

valeu meu caro realmente ajudou muito. Esse efeito é algo clean que curt muito. consegui adaptar por aqui e ficou muito legal valeu.