newdecline
@newdecline
Front-end-developer

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

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

Песочница
  • Вопрос задан
  • 217 просмотров
Решения вопроса 1
Aetae
@Aetae
Тлен

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

P.S. Обратите внимание, content не пустой, там zero width no-break space.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
GrenadinGran
@GrenadinGran
Помог ответ - отметь решением
htmlbook.ru/faq/kak-s-pomoshchyu-stiley-zadat-tsve...
Либо тайтлу, у которого должна быть линия position-relative
Дальше псевдоэлемент after, ему
width: 100%
position: absolute
И дальше стилизуйте
Ответ написан
sfrancisco
@sfrancisco
Посмотрите здесь
Думаю это поможет
Ответ написан
Комментировать
@kimqar_ver
https://codepen.io/kimqar/pen/jOPqbER
Расстояния, отступы, шрифт сами думаю поменяете, делал примерную схожесть с картинкой.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы