DEV Community

Salah Hasanin
Salah Hasanin

Posted on

Answer: Sliding border from right to left using CSS

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

Top comments (0)