Border bottom with fixed size - html

Question

What is the best way to add a small border at the bottom of a text?
The border has to be centered and maximum 20px, but the text can be very long, even 200px.
So it's like:
<h1>This text can be longer than the border</h1>
<style>
.h1 {border-bottom:8px solid #000;}
</style>
Should I add a div after my h1 and set a maximum size for it?

Answer 1

you can use pseudo element ::after and use left:50% / transform:translateX(-50%) to align in the middle no matter the width
h1 {
position: relative;
display:inline-block;
/* min-width:200px */
}
h1::after {
border-bottom: 1px solid red;
bottom: -10px;
content: "";
height: 1px;
position: absolute;
width: 20px;
left:50%;
transform: translateX(-50%);
}
<h1>This text can be longer than the border</h1>

Answer 2

Using Linear Gradients for Background:
Or you can also do this using linear-gradient background images. Advantage of using a gradient is that it doesn't require any extra pseudo-elements which can be used for other purposes. The border's thickness is based on the background-size in Y-axis and the width of the border is based on the size in X-axis. The background-position property is used to center the border.
The disadvantage is the relatively poor browser support for linear-gradient as compared to pseudo elements. Gradients are supported only in IE10+.
h1 {
display: inline-block;
padding-bottom: 4px; /* to give some gap between text and border */
background: linear-gradient(to right, black, black);
background-repeat: no-repeat;
background-size: 20px 2px;
background-position: 50% 100%;
}
<h1>This text can be longer than the border</h1><br>
<h1>Some text with lesser length</h1><br>
<h1>Some text</h1>
Using a Pseudo-element:
You can do this using a pseudo-element. By adding a pseudo-element with 20px width, positioning it absolutely we will be able to produce the required effect. The left: 50%, translateX(-50%) is used to position the pseudo-element at the center. The height of the pseudo-element determines border's thickness while the background determines the color of the border.
Advantage of this is the browser support as it should work in IE8+.
h1 {
position: relative;
display: inline-block;
padding-bottom: 4px; /* to give some gap between text and border */
}
h1:after {
position: absolute;
content: '';
left: 50%;
bottom: -2px;
width: 20px;
height: 2px;
background: black;
transform: translateX(-50%);
}
<h1>This text can be longer than the border</h1>
<br>
<h1>Some text with lesser length</h1>
<br>
<h1>Some text</h1>

Answer 3

Improving the answer of dippas, you can see when you use bigger widths, the border of the after elements is innacurate. You can prevent this by using calc(50% - 100px); instead of 50% whereas the 100px are half the width of the after element.
.bottom-border {
position: relative;
display:inline-block;
}
.bottom-border::after {
border-bottom: 2px solid red;
bottom: -10px;
content: "";
height: 1px;
position: absolute;
width: 200px;
left: calc(50% - 100px);
transform: translateY(-50%);
}
<p class="bottom-border">
Hi, i am a quite long text, might be 200px, probably more i guess, but nobody knows really.
</p>