Как это сверстать?

Question

[Андрей Иванов]

Есть две карточки. В сабтайтле нужно сделать линию снизу как в макете. Всё что знал все испробовал, но безрезультатно.


Песочница

Answer 1

[Aetae]

Суть тут в том, что border нижнего span перекрывает border верхнего цветом фона, а в самом низу псевдоэлемент after благодаря разнице высоте и vertical-align отодвигает "перекрывающий" border ниже, открывая нужный нам.
Решение кажется довольно хрупким, но пока ничего иного на ум не пришло.

P.S. Обратите внимание, content не пустой, там zero width no-break space.

Comments

[Андрей Иванов]

Спасибо! Да решение конечно не из лёгких.

[Ankhena]

Aetae а, не, я как-то криво потестировала ваше решение. Прошу прощения )))

[Aetae]

Ankhena, руками каждый дурак может.)

Answer 2

[Egor]

htmlbook.ru/faq/kak-s-pomoshchyu-stiley-zadat-tsve...
Либо тайтлу, у которого должна быть линия position-relative
Дальше псевдоэлемент after, ему
width: 100%
position: absolute
И дальше стилизуйте

Comments

[Андрей Иванов]

Я так и делал. При переносе текста но вторую строку бордер на всю ширину становится же

[Egor]

Андрей Иванов, display: inline контейнеру

Answer 3

[Ilya Muromtsev]

Посмотрите здесь
Думаю это поможет

Answer 4

[kimqar_ver]

https://codepen.io/kimqar/pen/jOPqbER
Расстояния, отступы, шрифт сами думаю поменяете, делал примерную схожесть с картинкой.