移动边框底部位置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>