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

Рейтинг: 3Ответов: 3Опубликовано: 08.04.2015

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

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

css html вёрстка
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

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

.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;
}
<span class="test">text</span>

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

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

▲ 3

Примерно то же, что и у @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;
}
<h1>Некий заголовок некоего раздела страницы</h1>

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

▲ 1

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