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

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/

+4
source share
2 answers

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;
}
+8
source

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

0
source

All Articles