Jak poprawić ten przykład z kodem z niestandardowym podkreśleniem?

Cześć,

https://codepen.io/ykadosh/pen/bGqJKqJ?editors=0110

Jak należy zmodyfikować ten kod, aby podkreślenie rozciągało się na więcej niż jedną linię tekstu. Jeżeli tekst w children dla komponentu Underline będzie zbyt długi, SVG się nie wyświetli.
Jeśli nie da rady, to może ktoś zaproponuje inny sposób na uzyskanie podobnego efektu? Myślałem o ustawieniu svg jako tło i powielanie go na całą długość tekstu, ale to pewnie będzie wyglądało tak sobie.

Lukasz B napisał(a):

Jeżeli tekst w children dla komponentu Underline będzie zbyt długi, SVG się nie wyświetli.

Wyświetli się, tylko że jego szerokość będzie 0px.

Dzieje się tak dlatego, ze masz ustawione width: 100%, i kiedy słowo jest zbyt długie, wtedy <svg> za nim jest wrapowane i spada linijkę niżej (czyli w .pen-stroke już elementy nie są obok siebie, tylko są pod sobą).

Możesz spróbować to fixnąć na dwa sposoby:

• nie używaj width:100%:
  • usuń width: 100%:
  • zamiast tego dodaj left: 0; right: 0;
• nie pozwolić <svg> "spaść":

  .pen-stroke {
    white-space: nowrap;
  }
  

Zainteresuj się głębiej tym tematem - całość się sprowadza do bardzo popularnego problemu "position:absolute vs width:100%", wygooglaj.

Wielkie dzięki!