Quiero subrayar mi elemento finitamente mientras lo mantengo en el centro de la página usando text-align: center. Sin embargo, al usar border-bottom (para subrayar) y text-align: center al mismo tiempo, el subrayado continúa hasta el final de la página. ¿Hay alguna otra manera en que pueda lograr esto? Espero que entiendas mi problema. Gracias por adelantado.
h1 { text-align: center; margin: 5px; font-family: "Playfair Display", serif; color: #353935; border-bottom: 4px double black; <h1>Heading Text</h1>Kalpana Chawla es el contenido de mi elemento. Como puede ver, el subrayado comienza mucho antes de la 'K' y termina lejos de la 'a'. Quiero que el subrayado comience solo desde K' y termine en 'a' manteniendo el encabezado en el centro.
Puede hacer que el encabezado sea un bloque en línea y centrarlo en un elemento contenedor.
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>Espero que esto sea lo que estás buscando, usa text-decoration: underline
h1 { text-align: center; margin: 5px; font-family: "Playfair Display", serif; color: #353935; text-decoration: underline double; } <h1>Heading Text</h1>