I need to cut the horizontal width of a border-bottom to show the following effect 
:
I need to cut the horizontal width of a border-bottom to show the following effect :
$("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>I hope I can help you, regards
You can add a pseudo element to the tag, more information here (link in English)
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;
}