Добрый день,
Есть заголовки,которые обычно в 2 строчки, у данных заголовков нужно подчеркнуть именно нижнею строчку.
Строка в две строчки
Допустим в данном варианте, "две строчки" переносится и эти слова надо подчеркнуть.
Естественно вариант, брать нижнею строчку в доп тег, не подходит, т.к это все выводится автоматически через двиг и верстка адаптивная.
Строка в две строчки
Пока в голову пришел только такой "костыль", подчеркивать через бордер тег a, делать нужный line-height, и с помощью :before, закрывать первое подчеркивание. Данный вариант работает, но проблема именно в line-height и большом отступе между строчками, чтобы закрыть первый бордер. p.s строка выравнивается по центру! Надеюсь не сильно намудрил;)
Ответ
https://jsfiddle.net/LL895spd/3/
h3
{
width: 100px;
text-align: center;
display: inline-block;
position: relative;
}
h3 a:before {
content:'';
position:absolute;
width:100%;
height:100%;
left:0;
top:-1px;
background:#fff;
}
h3 a span{
position:relative;
}
a
{
border-bottom: 1px dashed #000;
text-decoration: none;
}
Ура!) Получилось сделать, без дубликатов и т.д) Как я раньше до такого решения не допер)
Спасибо всем!)
ihhaman - спасибо тебе! Натолкнул меня на мысль данную)
Комментариев нет:
Отправить комментарий