Линия до и после названия над изображением

Я хочу создать строку до и после центрированного заголовка. Строка и текст должны иметь прозрачный фон, чтобы иметь возможность размещать их на неровном фоне. Строка не должна быть 100% ширины, например:

Текст заголовка может измениться:

Ширина заголовка неизвестна
Заголовок может занимать несколько строк

h1 {
  text-align: center;
  border-bottom: 1px solid #000;
}

<h1>Today</h1>

Ответ 1

Вы можете сделать строку с обеих сторон заголовка с двумя псевдо элементами и границами:

Это работает над прозрачным фоном (линии и заголовок имеют прозрачный фон).
Длина линии будет соответствовать ширине заголовка, чтобы они всегда начинались и заканчивались в том же положении, независимо от длины заголовка.
Заголовок может span на нескольких строках, в то время как левая и правая линии остаются вертикально по центру (обратите внимание, что вам нужно обернуть заголовок тегом <span>, чтобы это работало. См. демонстрацию)

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
 body {
  background-image: url(http://i.imgur.com/EzOh4DX.jpg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  font-family: 'Open Sans', sans-serif;
}
h1 {
  width: 70%;
  margin: .7em auto;
  overflow: hidden;
  text-align: center;
  font-weight:300;
  color: #fff;
}
h1:before, h1:after {
  content: "";
  display: inline-block;
  width: 50%;
  margin: 0 .5em 0 -55%;
  vertical-align: middle;
  border-bottom: 1px solid;
}
h1:after {
  margin: 0 -55% 0 .5em;
}
span {
  display: inline-block;
  vertical-align: middle;
}

<h1>Today</h1>
<h1>Today news</h1>
<h1><span>Today<br/>news</span></h1>

Ответ 2

Вот еще один подход, используя дисплей flexbox. Свойство flex-grow указывает, как свободное пространство должно быть распределено между элементами, когда их общий размер меньше размера контейнера.

По умолчанию no width указывается в элементах, которые создают строки, и у них нет content (что означает, что они в основном пусты и не занимают места). Однако параметр flex-grow для этих элементов сделает оставшееся пространство (общее пространство контейнера - пространство текста) равномерно распределено между ними. Это заставляет его выглядеть так, как если бы линия проходила от конца до другого, кроме текста.

Сплошная строка по обе стороны содержимого:

В приведенном ниже фрагменте градиент сверху вниз используется для создания эффекта сплошной линии по обе стороны от содержимого.

h3{
  display: flex;
  flex: 1;
  width: 70%;
  margin: 20px auto;
  line-height: 1em;
}
.heading:before, .heading:after,
.heading-ie span.after, .heading-ie span.before{
  content: '';
  flex-grow: 1;
  margin: 0px 4px;
  background: linear-gradient(to right, white, white);
  background-size: 100% 2px;
  background-position: 0% 50%;
  background-repeat: repeat-x;
}

/* Just for demo*/
body{
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h3 class='heading'>Something broader</h3>
<h3 class='heading'>Something broader and broader</h3>
<h3 class='heading'>Something broader<br/> and spans multiple <br/> no. of lines</h3>

<!-- IE11 specific version -->

<h3 class='heading-ie'>
  <span class='before'></span> <!-- IE11 supports flex-grow only on actual elements -->
  Something broader and broader and broader
  <span class='after'></span> <!-- IE11 supports flex-grow only on actual elements -->
</h3>