Подчеркивание последней строчки

#html #css #html5 #css3

Добрый день,

Есть заголовки,которые обычно в 2 строчки, у данных заголовков нужно подчеркнуть
именно нижнею строчку.

Строка в две строчки


Допустим в данном варианте, "две строчки" переносится и эти слова надо подчеркнуть.

Естественно вариант, брать нижнею строчку в доп тег, не подходит, т.к это все выводится
автоматически через двиг и верстка адаптивная.

Строка в две строчки


Пока в голову пришел только такой "костыль", подчеркивать через бордер тег a, делать
нужный line-height, и с помощью :before, закрывать первое подчеркивание.
Данный вариант работает, но проблема именно в line-height и большом отступе между
строчками, чтобы закрыть первый бордер.
p.s строка выравнивается по центру!
Надеюсь не сильно намудрил;)
    

Ответы

Ответ 1

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 - спасибо тебе! Натолкнул меня на мысль данную)


Ответ 2

Предлагаю подчеркнуть непосредственно сам залоговок, а для ссылки убрать стандартное
подчеркивание.

h3
{
  display: inline-block;
  border-bottom: solid 1px blue;
}
a
{
  text-decoration: none;
}


Пример: https://jsfiddle.net/nk96jmd5/