悬停时从左到右播放底部边框动画

Question

当你悬停在底部边框上时，应该出现动画效果。这段代码在第一个示例中有效，但是在我尝试重现它时，在第二个示例中无法运行。

#name:hover > .slider {
width: 100%;
}

.project-list .title a:hover > .slider {
width: 100%;
}

https://jsfiddle.net/0ou3o9rn/4/

https://jsfiddle.net/0ou3o9rn/9/

- user2252219

---

“border”不是您可以以那种方式进行动画处理的元素；它要么存在，要么不存在，您无法在保持所属元素静态宽度的同时使其增长。第一个JSFiddle使用单独的div，并将其宽度从容器的0％更改为100％。 - TylerH

Answer 1

找到可工作的演示

将位置相对于一个标签给出。

<a href="#modal7" class="nombore">
     <span>/07</span>
     <span class="slider"></span>  
 </a>

.nombore{
    position:relative;
    display:inline-block;
    transition: all 0.3s ease-out;
}

- Ganesh Yadav

---

我点了踩，因为这应该可以在没有额外滑块范围的情况下实现。 - poitroae

亲爱的Poitroae，当然可以在不需要额外的span和slider元素的情况下实现。我已经为您编辑了一个fiddle，链接为https://jsfiddle.net/0ou3o9rn/21/。我这样做是因为在他的问题中，span和slider div已经存在了。所以，我想他可能希望像这样实现。 - Ganesh Yadav