Как сверстать заголовок с подчеркиванием оставшейся части строки?

#html #css #вёрстка

Здравствуйте.
Возможно ли сверстать без js вот такой заголовок (собственно интересует подчеркивание
оставшейся части строки):


Фон у заголовка должен быть прозрачным. и хотелось бы обойтись без вложенных спанов,
т.к. хочется дать возможность контент-менеджеру добавлять такие заголовки в текст просто
выбрав класс из списка.
    

Ответы

Ответ 1

Можно использовать такое вот решение:



.test:after {
     display: inline-block;
      width: 100%;
      border-bottom: solid 1px #000;
      content: '';  
      margin-top: 13px;
      margin-left: 3px;
      position: absolute;
}

span.test {
  display: block;  
  position: relative;
  overflow: hidden;
}
text




В общем, то - то же самое что и в ответе от Special, но работает с заголовком в несколько
строк (подчеркивание переносится на нижнюю строчку) и не добавляет скрол снизу

Пример тут: http://jsfiddle.net/tk3bduop/3/


Ответ 2

Примерно то же, что и у @FAngel, но может быть немного полегче:



body {
    background: #ccc;
}

h1 {
    position: relative;
    color: brown;
    font: 20px sans-serif;
    text-transform: uppercase;
    overflow: hidden;
}
h1:after {
    content: '';
    position: absolute;
    width: 100%;
    bottom: 0;
    border-bottom: 1px solid;
}
Некий заголовок некоего раздела страницы




Демо: http://jsfiddle.net/2b225ehn/


Ответ 3

Если я вас правильно понял, то вот решение http://jsfiddle.net/juttnayo/


Ответ 4

Заголовок должен умещаться в одну строку, иначе скролл.
http://jsfiddle.net/2s2nqdn7/

Какой-то заголовок 


Как избавиться от пробела для отступа не придумал. Но сама идея работает и без него.

h1 {
  display: table-row;
  white-space: nowrap;
}

h1:after {
  content: "";
  border-bottom: 1px solid;
  width: 100%;
  display: table-cell;
  position: relative;
  bottom: 8px;
}