CSS - Borde inferior de la mitad o menos

 
Vista:

Borde inferior de la mitad o menos

Publicado por Francisco Daniel (12 intervenciones) el 12/08/2020 17:51:20
Hola a todos: como hago algo como esto:

TITULO DE LA SECCION
__________

No se si me explico. Quiero que la linea, que lo hago con el border.bottom solo me ocupe la mitad de todo el texto.

Muchas Gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Lopez
Val: 139
Bronce
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Borde inferior de la mitad o menos

Publicado por Lopez (33 intervenciones) el 13/08/2020 04:21:08
Hola Francisco Daniel,

Algo así puede hacer el truco:

1
<h1>TITULO DE LA SECCION</h1>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
h1 {
  font-weight: 300;
  display: inline-block;
  padding-bottom: 5px;
  position: relative;
}
h1:before{
    content: "";
    position: absolute;
    width: 50%;
    height: 1px;
    bottom: 0;
    left: 0%;
    border-bottom: 1px solid red;
}

Demo: https://codepen.io/lowpez/pen/qBZbarz


Si planeas reusar el estilo, puedes reemplazar H1 (css) por una clase css, por ejemplo .medio-subrayado y ocuparlo así:

1
<h2 class="medio-subrayado">TITULO DE LA SECCION</h2>

Seguro funcionara igual.
Cuéntanos que tal,
Saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de joel
Val: 668
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Borde inferior de la mitad o menos

Publicado por joel (152 intervenciones) el 13/08/2020 08:53:16
Muy bueno Lopez!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Lopez
Val: 139
Bronce
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Borde inferior de la mitad o menos

Publicado por Lopez (33 intervenciones) el 13/08/2020 15:12:40
Gracias, doc
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Borde inferior de la mitad o menos

Publicado por Francisco Daniel (12 intervenciones) el 13/08/2020 14:21:06
Funcionó de Maravillas.....Muchas Gracias por tu tiempo....


Gracias a todos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar