Skip to main content
inclui novas instruções
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

Vou postar um solução que cheguei aqui que achei interessante e resolve alguns bugs.

O principal aqui foi fazer um pequeno hake para o underline renderiza legal. Para isso precisei usar um linear-gradient transparente como background do span. Não me pergunto porque, pois descobri isso acidentalmente... Enquanto estava testando o comportamento do elemento animado eu coloquei um background-color nele e percebi que o bug parou, porém usando a cor em rgba() o problema volta, mas com um background-imagem: linear-gradiend o bug não acontece, pelo menos no Chrome!

Também precisei usar a propriedade text-underline-position: under; para corrigir esse problema no Chrome:

inserir a descrição da imagem aqui

Veja o resultado No Chrome e no FireFox

inserir a descrição da imagem aqui

Também precisei fazer um ajustes usando display:inline-block, overflow e height para controlar como a linha vai ficar cortada etc...

Segue o código usado:

div {
    font-family: sans-serif;
    font-size: 2rem;
}
div span,
div .efeito{
    display: inline-block;
    height: 60px;
    overflow: hidden;
}
div .efeito{
    font-weight: bold;
    text-decoration: underline;
    text-decoration-color: orange;
    text-underline-position: under;
    position: relative;
}
div .efeito:hover{
    text-decoration: none;
}
div .efeito::after{
    content: attr(data-text);
    width: 100%;
    color: transparent;
    position: absolute;
    top: 0;
    left: 15px;
    transition: 0s linear;
    text-decoration: none;
    text-decoration-style: none;
    text-decoration-color: orange;
    display: inline-block;
    height: 60px;
    text-underline-position: under;
    background-image: linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.0));
    z-index: -1;
}

div .efeito:hover::after {
    animation: underx 500ms infinite linear;
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: orange;
}

@keyframes underx {
    to {
        left: 0px;
    }
}
<div>
    <span class="efeito" data-text="meuy texto 123">meuy texto 123</span> <span>segue conteúdo.</span>
</div>

OBS: Em fontes de tamanhos diferentes muito possivelmente será preciso ajustar os valores que estão em PX

Vou postar um solução que cheguei aqui que achei interessante e resolve alguns bugs.

O principal aqui foi fazer um pequeno hake para o underline renderiza legal. Para isso precisei usar um linear-gradient transparente como background do span. Não me pergunto porque, pois descobri isso acidentalmente... Enquanto estava testando o comportamento do elemento animado eu coloquei um background-color nele e percebi que o bug parou, porém usando a cor em rgba() o problema volta, mas com um background-imagem: linear-gradiend o bug não acontece, pelo menos no Chrome!

Também precisei usar a propriedade text-underline-position: under; para corrigir esse problema no Chrome:

inserir a descrição da imagem aqui

Veja o resultado No Chrome e no FireFox

inserir a descrição da imagem aqui

Também precisei fazer um ajustes usando display:inline-block, overflow e height para controlar como a linha vai ficar cortada etc...

Segue o código usado:

div {
    font-family: sans-serif;
    font-size: 2rem;
}
div span,
div .efeito{
    display: inline-block;
    height: 60px;
    overflow: hidden;
}
div .efeito{
    font-weight: bold;
    text-decoration: underline;
    text-decoration-color: orange;
    text-underline-position: under;
    position: relative;
}
div .efeito:hover{
    text-decoration: none;
}
div .efeito::after{
    content: attr(data-text);
    width: 100%;
    color: transparent;
    position: absolute;
    top: 0;
    left: 15px;
    transition: 0s linear;
    text-decoration: none;
    text-decoration-style: none;
    text-decoration-color: orange;
    display: inline-block;
    height: 60px;
    text-underline-position: under;
    background-image: linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.0));
    z-index: -1;
}

div .efeito:hover::after {
    animation: underx 500ms infinite linear;
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: orange;
}

@keyframes underx {
    to {
        left: 0px;
    }
}
<div>
    <span class="efeito" data-text="meuy texto 123">meuy texto 123</span> <span>segue conteúdo.</span>
</div>

Vou postar um solução que cheguei aqui que achei interessante e resolve alguns bugs.

O principal aqui foi fazer um pequeno hake para o underline renderiza legal. Para isso precisei usar um linear-gradient transparente como background do span. Não me pergunto porque, pois descobri isso acidentalmente... Enquanto estava testando o comportamento do elemento animado eu coloquei um background-color nele e percebi que o bug parou, porém usando a cor em rgba() o problema volta, mas com um background-imagem: linear-gradiend o bug não acontece, pelo menos no Chrome!

Também precisei usar a propriedade text-underline-position: under; para corrigir esse problema no Chrome:

inserir a descrição da imagem aqui

Veja o resultado No Chrome e no FireFox

inserir a descrição da imagem aqui

Também precisei fazer um ajustes usando display:inline-block, overflow e height para controlar como a linha vai ficar cortada etc...

Segue o código usado:

div {
    font-family: sans-serif;
    font-size: 2rem;
}
div span,
div .efeito{
    display: inline-block;
    height: 60px;
    overflow: hidden;
}
div .efeito{
    font-weight: bold;
    text-decoration: underline;
    text-decoration-color: orange;
    text-underline-position: under;
    position: relative;
}
div .efeito:hover{
    text-decoration: none;
}
div .efeito::after{
    content: attr(data-text);
    width: 100%;
    color: transparent;
    position: absolute;
    top: 0;
    left: 15px;
    transition: 0s linear;
    text-decoration: none;
    text-decoration-style: none;
    text-decoration-color: orange;
    display: inline-block;
    height: 60px;
    text-underline-position: under;
    background-image: linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.0));
    z-index: -1;
}

div .efeito:hover::after {
    animation: underx 500ms infinite linear;
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: orange;
}

@keyframes underx {
    to {
        left: 0px;
    }
}
<div>
    <span class="efeito" data-text="meuy texto 123">meuy texto 123</span> <span>segue conteúdo.</span>
</div>

OBS: Em fontes de tamanhos diferentes muito possivelmente será preciso ajustar os valores que estão em PX

Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

Vou postar um solução que cheguei aqui que achei interessante e resolve alguns bugs.

O principal aqui foi fazer um pequeno hake para o underline renderiza legal. Para isso precisei usar um linear-gradient transparente como background do span. Não me pergunto porque, pois descobri isso acidentalmente... Enquanto estava testando o comportamento do elemento animado eu coloquei um background-color nele e percebi que o bug parou, porém usando a cor em rgba() o problema volta, mas com um background-imagem: linear-gradiend o bug não acontece, pelo menos no Chrome!

Também precisei usar a propriedade text-underline-position: under; para corrigir esse problema no Chrome:

inserir a descrição da imagem aqui

Veja o resultado No Chrome e no FireFox

inserir a descrição da imagem aqui

Também precisei fazer um ajustes usando display:inline-block, overflow e height para controlar como a linha vai ficar cortada etc...

Segue o código usado:

div {
    font-family: sans-serif;
    font-size: 2rem;
}
div span,
div .efeito{
    display: inline-block;
    height: 60px;
    overflow: hidden;
}
div .efeito{
    font-weight: bold;
    text-decoration: underline;
    text-decoration-color: orange;
    text-underline-position: under;
    position: relative;
}
div .efeito:hover{
    text-decoration: none;
}
div .efeito::after{
    content: attr(data-text);
    width: 100%;
    color: transparent;
    position: absolute;
    top: 0;
    left: 15px;
    transition: 0s linear;
    text-decoration: none;
    text-decoration-style: none;
    text-decoration-color: orange;
    display: inline-block;
    height: 60px;
    text-underline-position: under;
    background-image: linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.0));
    z-index: -1;
}

div .efeito:hover::after {
    animation: underx 500ms infinite linear;
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: orange;
}

@keyframes underx {
    to {
        left: 0px;
    }
}
<div>
    <span class="efeito" data-text="meuy texto 123">meuy texto 123</span> <span>segue conteúdo.</span>
</div>