Как расположить подчеркивание под заголовком(html/css), что бы она не уезжала при адаптиве?

Question

[R1msk1y]

Приветствую!
Как сделать подобное подчеркивание в html/css?
Скрин: https://a.radikal.ru/a25/2110/e0/fbfeb43b1787.png
Нужно чтобы полоска была позади текста.
Если бы оба элемента были абсолютными, то понятно через z-index, но у меня текст с стандартным позиционированием, или релатив, а полоска абсолют.
Нужно как то привязать полоску в подчеркнутой части текста и сделать чтобы она была под ним по оси Z.
Сделал так: нужный текст для подчеркивания обернул в спан. Сделал его - position: relativ. Относительно него псевдо элемент after c position: absolute и z-index: -1.
Подчеркивание есть, но при уменьшение размера экрана когда текст начинает ломаться полоска само собой едет.
Как сделать что бы она не съезжала и была всегда в нужном месте?

Answer 1

[Rsa97]

Comments

[R1msk1y]

оригинальный вариант! помогло, спасибо!)

Answer 2

[alaskafx]

Надеюсь, оно?

Comments

[R1msk1y]

ну вот если текст во всю ширину, то конечно работает
а если экран уменьшается и часть текста остается на верху, а остальная переносится вниз, то не работает)

[alaskafx]

R1msk1y, Так вы уменьшайте текст при той ширине экрана - где ломается.

[R1msk1y]

я пота только white-space - no wrap могу придумать, для всего спана
но тогда текст не во все мобильные экраны помещается)

[R1msk1y]

alaskafx, всмысли размер блока с текстом через width?
у меня сейчас просто стоит text-align - center для этих заголовков)

[R1msk1y]

alaskafx, или размер шрифта уменьшать, через font-size?

[alaskafx]

R1msk1y, Уменьшайте font-size)

[R1msk1y]

alaskafx, вот такой вариант предложили еще
span{
background-color: #fff;
background: linear-gradient(180deg, #fff 0%, #fff 60%, #72e2d5 60%, #72e2d5 100%);
}
может будет полезно)

[alaskafx]

R1msk1y, Не отрицаю)