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.
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>