css - 在悬停动画底部边框从左到右

Question

当您将鼠标悬停在底部边框时，它应该具有动画效果。该代码在第一个 fiddle 中工作，但当我尝试在第二个 fiddle 中复制它时却没有。

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

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

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

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

Answer 1

查找 working fiddle demo

给出相对于标签的位置。

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