Как сверстать подчёркивание до цены?

Question

[Максим]

Как сверстать подчёркивание до цены?
Нашёл такой вариант jsfiddle.net/L2ya3buj/1 , но он мне не подходит, т.к если текст в 2 строки, то линии нет, показал красным на скриншоте как должно быть

Comments

[Ярослав Иванов]

а откуда она появится ?

[Максим]

Ярослав Иванов: так дизайнер нарисовал, я поэтому и спросил тут, может кто реализовывал такое

[Ярослав Иванов]

Максим: ну так скажите дизайнеру, что это не реализуемо. Дизайнер не всегда прав.

[Ярослав Иванов]

Это надо делать на Js, просчитывать кол-во символов или смотреть высоту блока и если она больше то присваивать класс. К чему такой геморой ?

[Сергей delphinpro]

Ярослав Иванов: да брось! =) какой js для столь простой задачки?

[Ярослав Иванов]

Сергей: просто статичной версткой запилить)))

[Ярослав Иванов]

Сергей: Я думал автору нужна красная линия если блок в 2 строчки

Answer 1

[Сергей delphinpro]

Владимир , Ярослав Иванов , Максим
не надо никакого джаваскрипт, угараете что ли? =)))
https://codepen.io/delphinpro/pen/ybMdPK

Comments

[alex]

пунктир должен быть на последней строчке)

[Ярослав Иванов]

Вопрос не так понял)) где линия красная ?)

[Ярослав Иванов]

Едрить, так надо просто чтобы линия была ровно ?

[Сергей delphinpro]

Alex: а где он сейчас?

[alex]

Сергей: у меня сверху (зеленый FF, win7@64)

spoiler

[Сергей delphinpro]

Alex: Неожиданная подстава со стороны FF ... Похоже на какой-то баг, потому что при включении/отключении нек свойств в инспекторе, все встает на места.
Но тем не менее обновил свой пен, с исправлением под FF

Answer 2

[Владимир]

В комментариях правильно говорят: надо велосипедить на js.

Answer 3

[Иван Вишневский]

Если очень примитивно, то вот:
https://codepen.io/forgetable/pen/EmWzBL

Вся суть в картинке, которая repeat-x. Картинку делать любую, главное, чтобы была черная часть, затем прозрачная. Ну и дальше нужно выставить элемент с этой картинкой, так чтобы он занимал всё свободное место, можно сделать при помощи flex-grow, например.

Прекрасно сработает с двумя строками, делать можно так же, как и в пене. Просто оборачивается каждая строка в свой элемент с display: flex.