Link underline Duplo

Link underline Duplo

Neste tutorial veremos como criar um link underline duplo com Css e Html.

Nesta seção, projetaremos uma estrutura com a tag abaixo. 

Usaremos A Tag <a> para inserirmos o LINK de destino com as class link e link-underline.

Essas tags usaremos para criar o nosso link com underline duplo com html e css.

Vamos Adicionar o HTML

 <a href="#" class="link link--underline">Leia mais...</a>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar a nosso Link sublinhado com css e html.

.link {

    cursor: pointer;
    font-size: 18px;
    position: relative;
    white-space: nowrap;
    color: #242424;
    text-decoration: none;
    transition: 0.3s;


}

.link:hover { color:#08aadb; }

.link::before,
.link::after {

    position: absolute;
    width: 100%;
    height: 1px;
    background: #08aadb;
    top: 100%;
    left: 0;
    pointer-events: none;

}

.link::before {
    content: '';
}

.link--underline {
    font-family: 'open_sansregular';
    font-size: 1.3em;
}

.link--underline::before,
.link--underline::after {
    opacity: 0;
    transform-origin: 50% 0%;
    transform: translate3d(0, 3px, 0);
    transition-property: transform, opacity;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.2, 1, 0.8, 1);
}

.link--underline:hover::before,
.link--underline:hover::after {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-timing-function: cubic-bezier(0.2, 0, 0.3, 1);
}

.link--underline::after {
    content: '';
    top: calc(100% + 4px);
    width: 70%;
    left: 15%;
}

.link--underline::before,
.link--underline:hover::after {
    transition-delay: 0.1s;
}

.link--underline:hover::before {
    transition-delay: 0s;
}

Combinando as Duas seções acima Html e Css temos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando