Как я могу создать горизонтальную линию с центрированным текстом и закрытыми концами с помощью CSS?

Есть много вопросов (и ответов) о том, как создать заголовок с текстом по центру и горизонтальной линией по бокам, но то, что я хотел бы достичь, немного отличается.

Я хотел бы добавить вертикальные линии к левому и правому концу строк:

пример заголовка

Я приблизился к тому, что хотел бы использовать этот код:

body {
  padding: 50px;
}

div.outer {
  width: 100%;
  height: 15px;
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-left: 1px solid black;
  text-align: center;
  margin: auto;
  position: relative;
}

div.outer>span {
  font-size: 16px;
  background-color: #FFF;
  padding: 0 10px;
  position: absolute;
  top: -10px;
  left: 47%;
}
<div class="outer">
  <span>A Heading</span>
</div>

ручка

Может ли кто-нибудь указать мне в правильном направлении?

ОБНОВИТЬ

Спасибо @nvioli за то, что указали мне правильное направление. В итоге я использовал комбинацию вашего ответа и гибкости на основе этот пост

Вот что сработало для меня: pen


css horizontal-line
person datahandler    schedule 25.04.2019    source источник
comment
Обман показывает базовую технику, для концов используйте другой псевдо: jsfiddle.net/yv9dxqo4   -  person Ason    schedule 25.04.2019
comment
ОП уже решил проблему в связанном вопросе. Ваш комментарий показывает, что для построения вертикальных линий необходимо дополнительное решение, о чем и идет речь. Голосование за открытие.   -  person nvioli    schedule 25.04.2019

Ответы (1)


arrow_upward
0
arrow_downward

Я бы предложил добавить еще один div за пределы того, что у вас есть. Вы проделали хорошую работу, создав горизонтальную линию и отцентрировав текст (что является сложной частью, IMO), поэтому оберните все это в больший div (в два раза выше) и переместите внутренний div вниз на половину высоты, кажется, работает .

Обратите внимание, я переименовал ваш outer div в inner и добавил новый outer.

body {
  padding: 50px;
}

div.outer {
  border-right: 1px solid black;
  border-left: 1px solid black;
  height:30px;
}

div.inner {
  width: 100%; 
  height: 15px; 
  border-top: 1px solid black; 
  text-align: center;
  margin: auto;
  position: relative;
  top:15px;
}

div.inner > span {
  font-size: 16px; 
  background-color: #FFF; 
  padding: 0 10px;
  position: absolute;
  top: -10px;
  left: 47%;
}
<div class="outer">
  <div class="inner">
    <span>A Heading</span>
  </div>
</div>

person nvioli    schedule 25.04.2019