Adjust distance between underline and text using css - css

Question

I want to add some space between the text and the underline. But when I try to add some border on the bottom it occupies the 100% width of my resolution.
So it looks like this:
Here's my css:
h1 {
font-size: 24pt;
color: #279839;
position: relative;
text-decoration: none;
padding-bottom: 5px;
border-bottom: 1px solid #279839;
}
My page is multilingual so the border bottom should be the same width of the text.
Can you help me with this?

Answer 1

text-underline-offset
<h1 style="text-decoration:underline; text-underline-offset:.25em;">text</h1>

Answer 2

You could add display: inline-block; to the <h1> or you add a inline element (like a span) inside the h1 ...
h1 {
text-align: center;
}
h1 span {
font-size: 24pt;
color: #279839;
padding-bottom: 5px;
border-bottom: 1px solid #279839;
}
<h1><span>hello</span></h1>
<h1><span>hello world</span></h1>
<h1><span>hello world and univers</span></h1>

Answer 3

Put a span tag inside the h1
<h1 class="the-h1"><span class="the-span">商品</span></h1>
the css
.the-h1 {
text-align: center;
}
.the-span {
display: inline-block;
font-size: 24pt;
color: #279839;
position: relative;
text-decoration: none;
padding-bottom: 5px;
border-bottom: 1px solid #279839;
}

Answer 4

If you don't want to wrap that by some other tag then use transform to align h1 tag at center of page and change it's display to inline-block this applies to only one h1 tag,
h1 {
font-size: 24pt;
color: #279839;
position: relative;
text-decoration: none;
padding-bottom: 5px;
border-bottom: 1px solid #279839;
display: inline-block; /*Add this*/
left: 50%; /*Add this*/
transform: translate(-50%, 0); /*Add this*/
}
<h1>Hello</h1>

Answer 5

Step1: You need to make H1 display:inline-block; so that the border remain according to the width of text instead of window width.
Step2: In Order to provide space you can use css pseudo element
h1 {
font-size: 24pt;
color: #279839;
position: relative;
text-decoration: none;
padding-bottom: 5px;
display:inline-block;
position:relative;
margin: 0 0 10px;
}
h1:after {
content:'';
position: absolute;
left:0;
right:0;
bottom:0;
height:1px;
background: #279839;
display: block;
}

Answer 6

Your h1 tag is a block element by default, so it makes sense that the border-bottom goes through the whole width. You would need to change the display property of your headline to achieve the wished result.
h1 {
display: inline-block; /* most solid one; best choice */
display: initial; /* most safe one can easily be overwritten */
display: inline-flex; /* could be useful if people using flex-grids */
}

Answer 7

h1 {
display:Block;
width: 25%
position:relative;
margin-right:auto;
margin-left:auto;
font-size: 24pt;
color: #279839;
position: relative;
text-decoration: none;
padding-bottom: 5px;
border-bottom: 1px solid #279839;
}