0

Necesito recortar la anchura horizontal de un border-bottom para mostrar el efecto siguienteintroducir la descripción de la imagen aquí:

2 respuestas 2

4

Puedes agregar un pseudo elemento a la etiqueta, más información aquí (enlace en inglés)

h1 {
font-weight: 300;
display: inline-block;
padding-bottom: 5px;
position: relative;
}

CSS

h1:before{
    content: "";
    position: absolute;
    width: 50%; //ANCHO DE LA UNDERLINE
    height: 1px;
    bottom: 0;
    left: 25%;
    border-bottom: 1px solid red;
}
1
  • Muchas gracias colega, tu respuesta estuve super cerca. Un abrazo
    – Jean Manzo
    el 27 abr. 2017 a las 19:21
1

$("p").hover(function(){
  $(this).toggleClass('over');
});
.over {
    font-weight: 300;
    display: inline-block;
    padding-bottom: 5px;
    position: relative;
}
.over:before{
    content: "";
    position: absolute;
    width: 50%;
    height: 1px;
    bottom: 0;
    left: 25%;
    border-bottom: 1px solid red;
}

p {
    font-weight: 300;
    display: inline-block;
    padding-bottom: 5px;
    position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p >Parrafo 1</p>
<p >Parrafo 2</p>
<p >Parrafo 4</p>
<p >Parrafo 5</p>

Espero poder ayudarte, saludos

1
  • 1
    Excelente colega, tu respuesta fue absoluta y efectiva. Muchisimas gracias! Saludos.
    – Jean Manzo
    el 27 abr. 2017 a las 19:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.