Подчеркивание заголовка

272

11 декабря 2017, 13:46

Возможно ли сделать такое подчеркивание как в сниппете, то есть, чтобы бордер был по длине текста, без использования дополнительных тегов внутри заголовка и без float: left? Суть в том, что первый вариант не подходит т.к. тексты будут добавляться человеком незнакомым с html\css через редактор, второй, т.к. тогда поедут абзацы находящие после заголовка. Я знаю 2 способа, первый

h3>span{ 
  border-bottom: 2px solid #000; 
  padding-bottom: 3px; 
}

<h3><span>Заголовок</span></h3>

Второй

h3{ 
  float: left; 
  border-bottom: 2px solid #000; 
  padding-bottom: 3px; 
}

<h3>Заголовок</h3>

А вот можно ли как-то без доп тегов и float:left?

Answer 1

display: inline-block; или какой-то похожий?

h3{ 
  border-bottom: 2px solid #000; 
  padding-bottom: 3px; 
  display: inline-block; 
}

<h3>Заголовок</h3>

Answer 2

text-decoration https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration

h3{
 text-decoration: underline;
}

Answer 3

h3 {       
  display: inline-block; 
} 
 
h3:after { 
  content: ''; 
  display: inline-block; 
  vertical-align: top; 
  height: 2px; 
  width: 100%; 
  background: #000; 
  margin-top: 5px; 
}