Necesito recortar la anchura horizontal de un border-bottom para mostrar el efecto siguiente:
2 respuestas
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;
}
-
Muchas gracias colega, tu respuesta estuve super cerca. Un abrazo el 27 abr. 2017 a las 19:21
$("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
-
1Excelente colega, tu respuesta fue absoluta y efectiva. Muchisimas gracias! Saludos. el 27 abr. 2017 a las 19:22