移動邊框底部位置html

Question

我想移動任何文本的邊框小小的上升。請參閱圖片，以便您更好地瞭解我的問題。

我試過 border-bottom css text-decoration：下劃線的CSS屬性，但沒有按預期工作。

請建議我該如何實現。

由於​​

Answer 1

使用:before或:after

實施例1

div{ 
 
    text-align: center; 
 
} 
 
h1 { 
 
    padding: 0 20px; 
 
    position: relative; 
 
    text-align: center; 
 
    display: inline-block; 
 
} 
 
h1:before, 
 
h1:after { 
 
    content:'';  
 
    width: 100%; 
 
    position: absolute; top: 50%; 
 
    height: 1px;  
 
    background: #555;  
 
    transform: translateY(-50%); 
 
} 
 
h1:before{ 
 
    right: 100%; 
 
} 
 
h1:after{ 
 
    left: 100%; 
 
}

<div> 
 
<h1>title h1</h1> 
 
</div>

實施例2

h1 { 
 
    text-align: center; 
 
    margin: 15px 0; 
 
} 
 
h1:before, 
 
h1:after { 
 
    content: ''; 
 
    background: #222; 
 
    width: 50%; 
 
    display: inline-block; 
 
    vertical-align: middle;  
 
    height: 1px; 
 
    position: relative;  
 
} 
 
h1:before { 
 
    right: 10px; 
 
    margin-left: -50%; 
 
} 
 
h1:after { 
 
    left: 10px; 
 
    margin-right: -50%; 
 
}

<div> 
 
<h1>title h1</h1> 
 
<h1>title h1 title h1</h1> 
 
<h1>title h1 title h1 title h1</h1>  
 
</div>