Sliding border from right to left using CSS

Question

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?

score 26 · Accepted Answer · answered Jul 02 '15 at 09:37

26

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%; 
}

answered Jul 02 '15 at 09:37

Bogdan Kuštan

5,427
1
21
30

This worked like a charm! Thank you! I feel silly for not thinking of using right: – MasterDex Jul 02 '15 at 09:43
3

Since you are only animating the width property I would write the transition property like this: transition: width 1s ease; – Michael Falck Wedelgård Jul 02 '15 at 12:19
1

Future readers: note that animating width isn't considered best practice. Try using a combination of "overflow: hidden" on the parent and "transform: translateX(-100%)" on the child. This allows you to slide it in without altering the box model which results in a higher FPS animation. – Sean Anderson Feb 24 '18 at 12:37

score 1 · Answer 2 · answered Jul 02 '15 at 09:32

1

Give all:

-webkit-transition: 1s all ease;
        transition: 1s all ease;

answered Jul 02 '15 at 09:32

Praveen Kumar Purushothaman

164,888
24
203
252

Sliding border from right to left using CSS

2 Answers2