Como fazer - Links de navegação na borda inferior
Saiba como criar links de navegação com borda inferior (sublinhado) com CSS.
Links de navegação da borda inferior
Criar um menu de navegação
Etapa 1) Adicionar HTML:
Exemplo
<div class="topnav">
<a href="#home"
class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
Etapa 2) Adicionar CSS:
Exemplo
/*
Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/*
Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
border-bottom: 3px solid transparent;
}
.topnav a:hover {
border-bottom: 3px solid red;
}
.topnav
a.active {
border-bottom: 3px solid red;
}
Dica: para criar barras de navegação responsivas e compatíveis com dispositivos móveis, leia nosso tutorial Como - Navegação superior responsiva .
Dica: Acesse nosso Tutorial CSS Navbar para saber mais sobre as barras de navegação.