如何創建自定義邊框到文本

Question

如何獲取邊框如下圖所示。

衆所周知，我已經試過border-bottom的文本。但不能像這樣得到一個邊界的想法。我會嘗試僞元素嗎？

Answer 1

h1 { 
 
    display:inline-block; 
 
    position:relative; 
 
    padding-bottom:4px; 
 
} 
 
h1:before { 
 
    display:block; 
 
    content:""; 
 
    width:70%; 
 
    height:1px; 
 
    background:orange; 
 
    position:absolute; 
 
    left:50%; 
 
    bottom:0; 
 
    transform:translate(-50%); 
 
} 
 
h1:after { 
 
    display:block; 
 
    content:""; 
 
    width:20%; 
 
    height:4px; 
 
    background:orange; 
 
    position:absolute; 
 
    left:50%; 
 
    bottom:-4px; 
 
    transform:translate(-50%); 
 
}

<h1> 
 
Vijay Kumar 
 
</h1>

Answer 2

可以使用:before和:after僞元素來創建在元件的底部兩條線，並使用position: absolute放置它們。

h1 { 
 
    position: relative; 
 
    display: inline-block; 
 
    margin: 25px; 
 
} 
 
h1:after, 
 
h1:before { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: -2px; 
 
    height: 1px; 
 
    width: 60%; 
 
    left: 0; 
 
    background: #C0932E; 
 
    transform: translateY(100%); 
 
} 
 
h1:after { 
 
    height: 3px; 
 
    width: 30%; 
 
} 
 
.center:before, 
 
.center:after { 
 
    left: 50%; 
 
    transform: translate(-50%, 100%); 
 
} 
 
.start:before { 
 
    width: 100%; 
 
}

<h1 class="start">LOREM IPSUM</h1><br> 
 
<h1 class="center">Lorem ipsum dolor.</h1>

Answer 3

試試這個：

h1 { 
 
    border-bottom: 2px solid orange; 
 
    width: 200px; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
h1:after{ 
 
    content: ''; 
 
    position: absolute; 
 
    width: 100px; 
 
    border-bottom: 3px solid orange; 
 
    top: 39px; 
 
    left: 50px; 
 
}

<h1>This is Test</h1>