使用 CSS 从右向左滑动边框

Question

我有一个 header，我想在悬停时从右向左滑动的边框，如果可能的话，使用纯 CSS。

目前，我可以使用以下方法获得从左向右滑动的边框 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%; }

有没有人有完成这个任务的好的解决方案？

Answer 1

全部给出：

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

Answer 2

您可以将 :after 元素放在右边

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

使用 CSS 从右向左滑动边框

Sliding border from right to left using CSS

html

css

sliding