Как рисовать идеальную линию между двумя заголовками?

Мой код HTML имеет следующую структуру:

h1 {
  text-align: center;
  font-size: 20pt;
  padding-bottom: 0;
}

h2 {
  text-align: center;
  font-size: 16pt;
}

<body>
  ...
  <div id="container">
    <h1>Title</h1>
    <h2>Sub</h2>
  </div>
  ...
</body>

Я хочу "нарисовать" линию между этими двумя заголовками следующим образом:

Он должен регулировать ширину заголовков:

(Извините, мои навыки редактирования изображений)

Есть ли простой способ только для CSS?

Ответ 1

Вы можете справиться с этой проблемой простым элементом pseudo. Изменение структуры html или не поддерживается css кроссбраузеров. Нам нужно использовать отображение table для родителя и создать новый элемент (ваша граница с pseudo) на <h1>.

Посмотрите на этот пример:

#container {
  display: table;
  margin: 0 auto;
  text-align: center;
}

h1:after {
  content:"";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom: 3px solid red;
}

h1, h2 {
  margin: 5px 0;
  padding: 0 10px 5px;
}

h1 {
  position: relative;
  font-size: 20pt;
}

h2 {
  font-size: 16pt;
}

  <div id="container">
    <h1>long long title</h1>
    <h2>Sub</h2>
  </div>

  <div id="container">
    <h1>h1</h1>
    <h2>Sub</h2>
  </div>


 <div id="container">
    <h1>h1</h1>
    <h2>long long subtitle</h2>
  </div>

Ответ 2

Самый простой и гибкий способ - использовать Flexbox. Просто добавьте левое и правое дополнение к элементам h1 и h2, поэтому строка всегда может быть немного длиннее, чем текст.

body {
  text-align: center;
}
.container {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
h1 {
  font-size: 20px;
  padding: 0 10px;
}
h2 {
  font-size: 16px;
  padding: 0 10px;
}
.line {
  height: 3px;
  width: 100%;
  background: red;
}

<div class="container">
  <h1>Lorem ispum</h1>
  <span class="line"></span>
  <h2>Sub</h2>
</div>
<hr>
<div class="container">
  <h1>Ispum</h1>
  <span class="line"></span>
  <h2>Lorem ipsum dolor sit amet.</h2>
</div>

Ответ 3

Попробуйте следующее:

#container {
  text-align: center;
}

h1 {
  border-bottom: 2px solid red;
  padding-bottom: 10px;
} 

/* h2 {
  padding-top: 0px;
  margin-top: 0px;
} */