Adjust distance between underline and text using css

Issue

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?

Solution

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>

Answered By - frnt