链接悬停：动画底部边框/下划线

Question

I've already known this underline/border-bottom animation for a long time (fiddle: https://jsfiddle.net/0ou3o9rn/4/ ), but I can't seem to find out how I'd have to style my codes correctly... Nothing works.

CSS:

.lists li {
    position: absolute;
    display:block;
    left: 0;
    top:90%;
    margin:0 auto;
    height: 2px;
    background-color: #000;
    width: 0%;
    transition: width 1s;}

HTML:

<div class="lists"><ul>
<li><a href="/">link 1</a></li>
<li><a href="/">link 2</a></li>
<li><a href="/">link 3</a></li>
</ul></div>

This for example doesn't work, but I still want an animated underline to appear when I hover over the li s/ a s. Can anyone help me? Thank you!

Answer 1

No need of extra markup (pseudo would do the job too anyway ), you could simply use a background-image (or gradient) and use background-size to expand/shrink the effect.background-position can be sused to set where effect can start (demo below does : left, center, right)

 .lists li { display: inline-block; margin:0 1em; } .lists li a { display: block; padding: 3px 1em 3px; text-decoration: none; background: linear-gradient(to left, gold, gold) no-repeat bottom center; background-size: 0% 3px; /* will not show */ transition: 0.25s; } .lists li a:hover { background-size: 100% 3px; /* will expand whole width */ } /* some more styling ? */ .lists { background:gray; } .lists li:first-of-type a { background-position: bottom left; } .lists li:last-of-type a { background-position: bottom right; } .lists li a { background-color: #222; color: #ace } 

 <div class="lists"> <ul> <li><a href="/">link 1</a> </li> <li><a href="/">link 2</a> </li> <li><a href="/">link 3</a> </li> </ul> </div> 

Answer 2

Slider is a box with 2px height. Initially widht of block is 0px. When user hovers over the #name, then width of slider becomes 100%. Now css transition is applied on this width. So, this animation occurs.

    <div id="splash"> <span id="name">random title
        <div class="slider"></div>
        </span>
    </div>


    .slider {
        position: absolute;
        display:block;
        left: 0;
        top:90%;
        margin:0 auto;
        height: 2px;
        background-color: #000;
        width: 0%;
        transition: width 1s;
    }
    #name:hover > .slider {
        width: 100%;
    }
    #splash {
        width:100%;
        height:100%;
        background-color:#fff;
        z-index:999999;
        position:fixed;
    }
    #name {
        color:#000;
        font-family:'Arial-BoldMT';
        font-weight:bold;
        font-size:50px;
        letter-spacing: -2px;
        display:block;
        left: 50%;
        transform: translate(-50%, 0);
        position:absolute;
        top:40%;
        margin:0 auto;
    }