23

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

Как здесь на картинке:

введите сюда описание изображения

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

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

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


 <h1>Today</h1>     

Свободный перевод вопроса Line before and after title over image от участника @JUO.

1

3 ответа 3

17

Нестандартное решение )) :

fieldset {
    border-left: none;
    border-right: none;
    border-bottom: none;
    text-align: center;
}
  <fieldset>
    <legend>Lorem ipsum.</legend>
  </fieldset>

Более стандартное:

header {
  text-align: center;
  overflow: hidden;
}

h1 {
  display: inline-block;
  position: relative;
}

h1:before,
h1:after {
  content: '';
  position: absolute;
  top: 50%;
  height: 1px;
  background: #000;
}

h1:before {
  right: 100%;
  left: -1000%;
}

h1:after {
  left: 100%;
  right: -1000%;
}
<section>
  <header>
    <h1>
      Lorem ipsum.
    </h1>
  </header>
</section>

ex , ex

2
  • первое решение как раз выглядит более "стандартным" =)
    – vp_arth
    4 апр 2017 в 14:45
  • @vp_arth, я обычно вторым пользуюсь)
    – SVE
    4 апр 2017 в 14:45
11

Вот еще один подход, используя дисплей flexbox. Свойство flex-grow определяет, как свободное пространство должно распределяться между элементами, когда их общий размер меньше размера контейнера.
По умолчанию для элементов, описывающие строки, width не указана, и у них нет содержимого (то есть они в основном пусты и не занимают места). Однако применение 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>

введите сюда описание изображения

Линия с градиентным эффектом с обеих сторон контента:

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

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-size: 100% 2px;
  background-position: 0% 50%;
  background-repeat: repeat-x;
}
.heading:before, .heading-ie span.before{
  background-image: linear-gradient(to right, transparent, white);
}
.heading:after, .heading-ie span.after{
  background-image: linear-gradient(to left, transparent, white);
}

/* 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> 

Примечание. В фрагменте я использовал дополнительные элементы span для строк, потому что IE11, по-видимому, не поддерживает flex-grow для псевдоэлементов. В противном случае то же самое может быть достигнуто и с псевдоэлементом.


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

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

В настоящее время это не дает ничего сверх ответа @web-tiki, но является еще одним возможным вариантом. Такой подход был бы более полезным в случаях, подобных приведенным ниже:

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

/* Order specifies the order in which the elements should be presen within container */

.content-1{
  order: 2;
}
.start{
  order: 1;
}
.middle{
  order: 3;
}
.content-2{
  order: 4;
}
.end{
  order: 5;
}

/* 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-ie'>
  <span class='start'></span> <!-- IE11 supports flex-grow only on actual elements -->
  <span class='content-1'>Text here</span>
  <span class='middle'></span> <!-- IE11 supports flex-grow only on actual elements -->
  <span class='content-2'>and here too</span>
  <span class='end'></span> <!-- IE11 supports flex-grow only on actual elements -->
</h3>

<h3 class='heading-ie'>
  <span class='start'></span> <!-- IE11 supports flex-grow only on actual elements -->
  <span class='content-1'>Text with <br/> line break</span>
  <span class='middle'></span> <!-- IE11 supports flex-grow only on actual elements -->
  <span class='content-2'>and here with <br/> line break too</span>
  <span class='end'></span> <!-- IE11 supports flex-grow only on actual elements -->
</h3>

введите сюда описание изображения

Свободный перевод ответа Line before and after title over image от участника @Harry.

11

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

  • Это работает на transparent background (линии и название имеют прозрачные фоны).
  • Длина линии адаптируется к ширине заголовка, поэтому они всегда начинаются и заканчиваются с одинаковыми пробелами независимо от длины заголовка.
  • Заголовок может занимать несколько строк, в то время как левая и правая линии остаются вертикально центрированными (обратите внимание, что вам нужно обернуть заголовок тегом 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>

Перевод ответа Line before and after title over image от участника @иweb-tiki.

Ваш ответ

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

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