When hovering the animation of the lower border from left to right

Question

When you draw the bottom border, you need to animate. The code works in the first fiddle, but not when I try to play 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 the demo version of the script

indicate the position relative to the 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;
}

Answer 2

The "div slider" should be inside the span, I think. Ah, and also your paragraph ruined everything.