On hover animate bottom border left to right

Question

When you hover the bottom border should animate. The code is working in the first fiddle but not when I try to replicate it in the second 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

find working fiddle demo

give position relative to a tag.

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