[Résolu] CSS lignes infinies, débordement et défilement horizontal...

Bonjour la communauté

J'ai une question à soulever, mais avant toute chose je vous invite à jeter un oeil ici pour avoir une idée du problème :
https://jsfiddle.net/tuosfy5r/

Donc, je m'amuse à vouloir tirer des traits sous du texte, de manière que le trait puisse partir à l'infini à gauche ou à droite du texte.
Quand c'est à gauche, pour le moment j'aligne mon texte à droite de son conteneur, je cache le background et je tire mon trait, qui part bien vers la gauche sans sourciller
Quand c'est à droite, j'inverse tout, mais j'ai une barre de défilement horizontale qui apparaît... ce qui est le point me gênant

La technique utilisée n'est pas forcément la meilleure, mais je n'ai pas eu d'autres idées pour le moment.
Si quelqu'un a une piste pour corriger le problème à droite de la barre de défilement qui apparaît ?
Si quelqu'un a des idées alternatives pour réaliser la même chose (y compris la version verticale, qui n'a pas besoin d'être infinie elle par contre), je suis également intéressé par curiosité, surtout si c'est mieux

Merci par avance pour les retours

Salut,

un overflow-X: hidden; sur le body ?

Merci, mais pourquoi n'y ai-je pas pensé...

Je laisse le sujet encore ouvert si quelqu'un a une autre idée à suggérer ou une toute autre alternative.

Bonjour,

j'ai très peu regardé ton fiddle et pareil overflow-x serait également mon 1er réflexe pour supprimer cette scrollbar mais je vois des width: 1000% : tu peux probablement remplacer par 100vw qui ne dépassera jamais de plus d'1 largeur de fenêtre (c'est déjà ça de gagné).
Comme moyen de ne pas générer de scrollbar, je vois calc(100vw - largeur connue) (je ne connais pas tes cas d'utilisations et probablement pas le temps de me pencher dessus, désolé), un truc avec flex-grow (occupe la place dispo, pas plus) ou grid s'il y a déjà un contexte de grid container/item mais bon ça va influer sur le texte aussi, pas que sur ce souligné. Si tu as besoin du position: absolute, c'est calc() et à défaut overflow-x

Merci pour les idées, j'ai modifié effectivement avec des vw et vh pour les dimensions des lignes (si on peut aller moins loin c'est bien aussi)

Je vais regarder du côté des autres pistes ce que cela pourrait donner

Bon je me suis finalement basé sur le overflow-x.
Merci.