CSS - Borde inferior de la mitad o menos

 
Vista:
sin imagen de perfil
Val: 16
Ha disminuido 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Borde inferior de la mitad o menos

Publicado por Francisco Daniel (20 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: 160
Bronce
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 Lopez (38 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: 870
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 (252 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: 160
Bronce
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 Lopez (38 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
sin imagen de perfil
Val: 16
Ha disminuido 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Borde inferior de la mitad o menos

Publicado por Francisco Daniel (20 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