Стилизация линии как на макете, как?

Question

[baggio91]

Подскажите, плиз, каким образом можно сделать так же, как на макете?
То есть, чтобы линии начинались с конца второй строки и примыкали ко второй строке. При том, что весь блок(зеленый) это резиновый квадрат.

Comments

[RAX7]

Как правильно сверстать такой элемент?

Answer 1

[Александр]

Сделал пару примеров. Если захотите писать черным цветом, то можно использовать mix-blend-mode: overlay. Возможно существует более простое/красивое/элегантное решение, но я сейчас не придумаю такое. Можно сделать намного проще, если не будет следующего условия:

чтобы линии начинались с конца второй строки и примыкали ко второй строке

Либо вручную разделять на строки и только последней строке добавлять подчеркивание.

Comments

[baggio91]

Если в контенте справа первая строка длиннее, чем вторая, получается не так как на макете ( линия не примыкает ко второй строке)

[Александр]

baggio91, Поправил.

[baggio91]

Александр, благодарю!

[YakovSpb]

этот же вариант не адаптивный

Answer 2

[Андрей Пастухов]

Вариант без разделения на строки через span, а ограничение через max-width

в этой реализации есть проблема с отступами от пунктирной линии

Comments

[baggio91]

Третья строчка (номер полиса) неудачная..

[Андрей Пастухов]

В чем "неудачность"? Так же как на макете (= верхняя строка длиннее нижней)

[baggio91]

Линия не примыкает к "1213223"

[Андрей Пастухов]

я только в ff смотрел. Поправил ((

[Максим]

baggio91, так у вас на скрине тоже не примыкает

[baggio91]

Много Чего, ‍посмотрите еще раз

[Максим]

baggio91, видно же - я все пробелы пометил стрелками

[baggio91]

Много Чего, это понятно
Там линия совсем не примыкала(даже с маленьким отступом) к блоку с контентом

[baggio91]

Вариант рабочий, но так и не разобрался как сделать отступы