如何使用html / css创建一个划分的border-bottom？

Question

我有一个RESTAURANT（文本）的范围，需要有一个边框底部，它被分成两个但不会与它下面的文本重叠。就像这张图片：

我想知道如何在“bar＆amp; lounge”旁边创建分割边框（在链接中）

Answer 1

创建此方法的最佳方法是使用CSS :before和:after。 您可以将此文本包装在一个<span>spoon and fork</span>中，也可以创建两个段落，由您决定。

然后你可以使用：before和：after

<p>Spoon and fork</p>

p {
  display: inline-flex;
  align-items: center;
}

p::before, p::after {
  content: "";
  width: 50px;
  height: 3px;
  background: red;
  margin: 5px;
}

Answer 2

试试这个：

h2{text-align:center}
.custom { width:100%; text-align:center; border-bottom: 1px solid #000; line-height:0.1em; margin:10px 0 20px; } 
.custom span { background:#fff; padding:0 10px; }

<h2>MARINA'S RESTAURANT</h2>
<h2 class="custom"><span>Spoon and Fork</span></h2>

Answer 3

你可以在伪元素之前和之后使用

.block{
width:350px;
text-align:center;
margin:0px auto;}
.text,.text2{
position:relative;
display:block;
font-size:28px;
text-transform:uppercase;}
.text:before{
content:'';
position:absolute;
border:2px solid #000000;
top:50%;
right:0px;
width:45px;}
.text:after{
content:'';
position:absolute;
border:2px solid #000000;
top:50%;
left:0px;
width:45px;}

<div class="block">
<span class="text2">Marina's restaurant</span><br/> <span class="text">spoon and fork</span></div>