Стилизация первой строки в предложении

Доброго времени суток,

У меня тут интересный дизайн, нужно чтобы первая строка предложения была почеркнута (как на мобиле так и на десктопе).

Проблема в мобильной версии, из за ширины экрана текст переносится оставляя пространство но при этом сам блок считается как за 100% поэтому полоска не останавливается у последнего символа(я ее через ::before сделал)

Мои попытки

Я пробовал и ширену и отступы делать, но так как это что то вроде блога надо сделать чтобы было универсально, так что не подходит .

меняя display тоже не привело ни какому результату.

после наткнулся на такой свойство как word-break: break-all; но оно не подходит по требованиям, так как слова должны быть нормально перенесены.

последние что я испробовал, это было ::first-line да это почти решение так как оно выделяет первую линию, но к сожалению ее не за стилизуешь и нельзя комбинировать с ::before.

Вот код некоторых моих попыток https://codepen.io/mn-25b/pen/xxYPdEr

Может есть какие-нибудь еще способы это реализовать? или использовать комбинацию ::first-line с ::before?


Ответы (0 шт):