hr:hover {
transform:scaleX(50.0);
}
CSS when Hover
hr
{
position: absolute;
transition: transform 1.5s ease-out;
width: 3%;
height: 3px;
background-color: white;
margin-left: 20%;
margin-top: 10%;
}
CSS of Line
Is there a way to scale the HR element to only go horizontally left on hover instead of both ways?
Also, how can I add a class name to my HR elements so that I can have multiple of them with different styles?
I managed to fix the issue by assigning a class name ".line" to my HR element.
.line
{
content: normal;
position: absolute;
transition: transform 1.5s ease-out;
width: 10%;
height: 5px;
background-color: white;
margin-left: 20%;
margin-top: 10%;
}
Despite trying, I still cannot figure out how to make the scaling effect move only to the left side.