Então, como mudar estilo de sublinhado de links em uma página web? É fácil! Você só tem que definir os vários estilos CSS sem usar o ‘text-decoration’. Neste pequeno tutorial vamos ver algumas técnicas CSS para aplicação de estilos diferentes para links em uma página web.
A ideia principal aqui exemplificada, é que você desabilite ‘text-decoration‘ para os links, em seguida, criar links para ter um modelo de caixa, adicionando a exibição com o valor inline-block. Depois disso, podemos mudar as bordas, preenchimento e margens. Aqui vamos mudar a borda inferior para alcançar os resultados desejados.
Estilos diferentes nas bordas
Na borda inferior, você pode alterar o tamanho, estilo e cor, esta pode ser solida, pontilhada ou tracejada. Mas se quiser, pode alterar qualquer outra borda com CSS.
/* Links */
a {
border-bottom: 1px dashed #ffa500;
color: #a66c00;
display: inline-block;
line-height: 100%;
text-decoration: none;
-moz-transition: all .5s;
-o-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
}
a:hover {
border-bottom-color: #a66c00;
color: #ffa500;
}
.dotted {
border-bottom-style: dotted;
E você costuma usar estas técnicas CSS? Conhece outras formas? Comente!
Um abraço e até já!