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][1]][1]

Veja o resultado No Chrome e no FireFox

[![inserir a descrição da imagem aqui][2]][2]

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:**

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    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;
        }
    }

<!-- language: lang-html -->

    <div>
        <span class="efeito" data-text="meuy texto 123">meuy texto 123</span> <span>segue conteúdo.</span>
    </div>

<!-- end snippet -->

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


  [1]: https://i.sstatic.net/NwE40.png
  [2]: https://i.sstatic.net/cU9ON.gif