如何使用html/css創建一個劃分的邊框底部？

Question

我有一個餐廳（文本）跨度需要有一個邊框底部分成兩個，但不會覆蓋下面的文本。這就像這張照片：

我想知道如何創建旁邊「酒吧&休息室」（中的鏈接）

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>