3

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

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

1
  • "Возможно ли сверстать без js" и тег "javascript" - а что, логично)))
    – Qwertiy
    15 апр 2015 в 9:30

4 ответа 4

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/

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/

1
  • Блин, точно, overflow:hidden ведь можно повесить на сам элемент) Благодарю.
    – rebroff
    8 апр 2015 в 16:05
1

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

2
  • Это решение очевидно. Нужно, чтобы полоска занимала оставшуюся часть строки, а не 100%. Вернее, не влекла за собой горизонтальный скролл.
    – rebroff
    8 апр 2015 в 16:03
  • Было бы неплохо дублировать куски кода непосредственно в ответе. Если ссылка "умрет" ваш ответ потеряет смысл. 9 апр 2015 в 11:32
0

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

<h1>Какой-то заголовок&#8239;</h1>

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

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.