I have a header that I want to have a border on that slides from right to left on hover, using pure CSS if that's possible.
At the moment, I can get a border that slides from left to right using the following CSS:
#header a:after {
content: '';
display: block;
border-bottom: 3px solid $(header.hover.color);
width: 0;
-webkit-transition: 1s ease;
transition: 1s ease;
}
#header a:hover:after { width: 100%; }
Has anyone a good solution for accomplishing this task?
If you want to set a border to just one side of the element, use four values (write none to the side you want no border to appear). If you want to set a border to the top and bottom sides, use two values (write none to the second value).
Set the container div to position: relative and then absolutely position the new inner div to the edges of the container like so: position: absolute; top: 0; bottom: 0; left: 0; right: 0; . Then you can animate the border of the inner div while the content still sits within the container div free of the transform.
You can position your :after
element to the right
#header {
position: relative;
}
#header a:after {
content: '';
display: block;
border-bottom: 3px solid red;
width: 0;
position: absolute;
right: 0;
-webkit-transition: 1s ease;
transition: 1s ease;
}
#header a:hover:after {
width: 100%;
}
Give all:
-webkit-transition: 1s all ease;
transition: 1s all ease;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With