Html css3边框顶部在悬停时从左侧出现

我试图实现的目标很简单，但我想我不明白它是如何工作的。在悬停状态下，我希望边框顶部从左到右显示

我试了几次都没有成功。它只是出现了，但不是我想要的方式。我的最后一个css是：

#导航头李{
列表样式：无；
显示：内联块；
左边距：1米；
}
.幻灯片订购{
文字装饰：无；
文本转换：大写；
颜色：#7f7f7f；
填充：0.5em；
边框顶部：2倍纯色透明；
宽度：0px；
-webkit过渡：1s轻松；
-moz转换：1s易用性；
-o-过渡：1s容易；
o-过渡：1s容易；
}
.幻灯片顺序：悬停{
边框顶部：2个实心#1fda9a；
宽度：100%；
}

您不能像那样设置边框的动画，但可以使用伪元素

#导航头李{
列表样式：无；
显示：内联块；
左边距：1米；
}
.幻灯片订购{
文字装饰：无；
文本转换：大写；
颜色：#7f7f7f；
填充：0.5em；
位置：相对位置；
}
.幻灯片顺序：之后{
内容：''；
位置：绝对位置；
排名：0；
左：0；
宽度：0；
高度：3倍；
背景：#f00；
过渡：宽度0.5s；
}
.幻灯片顺序：悬停：之后{
宽度：100%；
}

您希望它如何显示？你的意思是从左到右设置动画吗？是的！对不起，我以为有人接电话时我会收到一封电子邮件。