How can I underline a Heading element finitely while keeping it in the center(using text-align) at the same time?

Question

I want to underline my element finitely while keeping it in center of the page using text-align: center. However, using border-bottom(for underline) and text-align: center at the same time, the underline goes on till the end of the page. Is there any other way I can achieve this? Hope you understand my issue. Thanks in advance.

  h1 {
  text-align: center;
  margin: 5px;
  font-family: "Playfair Display", serif;
  color: #353935;
  border-bottom: 4px double black;

<h1>Heading Text</h1>

Kalpana Chawla is the content of my element. As you can see, the underline starts well before 'K' and ends afar from 'a'. I want the underline to start just from K' and end at 'a' while keeping the heading in the center.

Answer 1

You could make the heading inline-block and center it in a container element.

h1 {
  display: inline-block;
  margin: 5px;
  font-family: "Playfair Display", serif;
  color: #353935;
  border-bottom: 4px double black;
}

.text-center {
  text-align: center;
}

<div class="text-center">
  <h1>Heading Text</h1>
</div>

Answer 2

i hope this is you are looking for, use text-decoration: underline

h1 {
  text-align: center;
  margin: 5px;
  font-family: "Playfair Display", serif;
  color: #353935;
  text-decoration: underline double;
  }

<h1>Heading Text</h1>