1

Возможно ли сделать такое подчеркивание как в сниппете, то есть, чтобы бордер был по длине текста, без использования дополнительных тегов внутри заголовка и без 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?

3 ответа 3

3

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

h3{
  border-bottom: 2px solid #000;
  padding-bottom: 3px;
  display: inline-block;
}
<h3>Заголовок</h3>

1
1

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

h3{
 text-decoration: underline;
}
2
  • Думаю ТС хотел подчеркивание, которое можно контролировать по высоте. Хотя могу ошибаться 9 дек 2017 в 15:08
  • @АлексейШиманский всё верно 9 дек 2017 в 15:20
1

h3 {      
  display: inline-block;
}

h3:after {
  content: '';
  display: inline-block;
  vertical-align: top;
  height: 2px;
  width: 100%;
  background: #000;
  margin-top: 5px;
}
<h3>Заголовок</h3>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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