Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

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.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

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>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading