Html 链接悬停：已设置动画的底部边框/下划线

我已经知道这个下划线/边框底部动画很长一段时间了（fiddle:），但我似乎无法找到如何正确设置代码的样式。。。什么都不管用

CSS:

HTML:

---

例如，这不起作用，但当我将鼠标悬停在

li

s/

a

s上时，我仍然希望显示一个动画下划线。有人能帮我吗？谢谢大家!

滑块是一个高度为2倍的长方体。最初块的宽度为0px。 当用户将鼠标悬停在#名称上时，滑块的宽度将变为100%。 现在css转换应用于此宽度。所以，这个动画发生了

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

随机标题
.滑块{
位置：绝对位置；
显示：块；
左：0；
最高：90%；
保证金：0自动；
高度：2倍；
背景色：#000；
宽度：0%；
过渡：宽度1s；
}
#名称：悬停>.slider{
宽度：100%；
}
#飞溅{
宽度：100%；
身高：100%；
背景色：#fff；
z指数：999999；
位置：固定；
}
#名字{
颜色：#000；
字体系列：'Arial-BoldMT'；
字体大小：粗体；
字体大小：50px；
字母间距：-2px；
显示：块；
左：50%；
转换：转换（-50%，0）；
位置：绝对位置；
最高：40%；
保证金：0自动；
}

不需要额外的标记（pseudo也可以完成这项工作），您只需使用背景图像（或渐变）并使用

背景大小来扩展/缩小效果。可以使用background-position设置效果的开始位置（下面的演示是：左、中、右）


。列出了li{
显示：内联块；
边缘：0 1米；
}
.李娜{
显示：块；
填充：3px1em 3px；
文字装饰：无；
背景：线性渐变（向左，金色，金色）无重复底部中心；
背景尺寸：0%3px；
/*不会显示*/
过渡：0.25s；
}
.李娜：悬停{
背景尺寸：100%3px；
/*将扩展整个宽度*/
}
/*再来点造型*/
.名单{
背景：灰色；
}
李：a型的第一个{
背景位置：左下角；
}
.列出李：a型的最后一个{
背景位置：右下角；
}
.李娜{
背景色：#222；
颜色：#ace
}









我不明白，你的代码是有效的……小提琴不是我的，我不明白他们是如何设计的。这真的很酷+1用于不添加额外的伪选择器。
<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>

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