Move border bottom position html

Question

I want to move border of any text little upside. please see the image so you can better understand my problem.

I have tried border-bottom css text-decoration: underline css property but nothing work as expected.

Please suggest how can I achieve.

Thanks

Answer 1

use :before or :after

Example 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>

Example 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>