选择器：悬停前应用的hover.class

Question

我想应用链接选择器悬停效果，其中包括无序列表中的底部边框下划线。真的，我知道我可以使用边框底部做一个简单的下划线：#FFFFFF solid 2px;，但是我想用框阴影效果制作一个自定义下划线。所以我有两个问题。

1. 我的边界一直在出现，而不仅仅是在我悬停时。
2. 当我尝试在我的.underline类中添加一个盒子阴影时，它会绕过整个列表项而不会创建一个单独的行。我想我们以后可以买到这个项目。

我的CSS代码

li {
    margin: auto 0px 20px auto;
    font: 1em 'Bookman Old Style', Georgia, Garamond, ‘Times New Roman’, Times, serif;
    color: #FFFFFF;
}

li a {
    text-decoration: none;
    color: rgba(255,255,255,0.5);
    display: block;
}

li a:hover .underline {
    cursor: pointer;
    text-decoration: none;
    color: rgba(255,255,255,1);
}

.underline {
    border-bottom: #FFFFFF solid 2px;
}

我的HTML代码

<ul>
    <li><a class="underline" href="http://www.sitepoint.com/">SitePoint.com</a></li>
    <li><a href="http://www.sitepoint.com/css3-sliding-menu/">Revealing CSS3 Menu</a></li>
</ul>

我真的想要指出一篇关于如何通过CSS使用以下方式构建丰富的HTML元素的综合性文章：before和：after，并且能够在CSS中的一个选择器上正确使用多个类。

这是我所拥有（破碎）http://jsfiddle.net/jellis3d/a8svpwr4/2/的JSFiddle。这里还有我所追求的图片。我真的夸大了下划线，以显示我正在寻找的东西。该线也没有圆角。

Answer 1

我已经在js小提琴上做了一个基本演示，展示了我认为你的事后

jsfiddle link

它使用下面的css，我相信你可以看到我做了什么，并把它变成了你的后续。

li a{
    color:blue;
    text-decoration:none;
}
li a:hover{
    color:red;
    border-bottom: black solid 1px;
    box-shadow: 10px 10px 5px #888888;    
}

Answer 2

您可以将border-bottom应用于.underline:hover和box-shadow以及display: inline-block;至li a代码。

JSFiddle - DEMO

<强> HTML：

<ul>
    <li><a class="underline" href="http://www.sitepoint.com/">SitePoint.com</a>
    </li>
    <li><a href="http://www.sitepoint.com/css3-sliding-menu/">Revealing CSS3 Menu</a>
    </li>
</ul>

<强> CSS：

body {
    background: gray; /* only for demo */
}
li {
    margin: auto 0px 20px auto;
    font: 1em'Bookman Old Style', Georgia, Garamond, ‘Times New Roman’, Times, serif;
    color: #FFFFFF;
}
li a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.5);
    display: inline-block;
    box-shadow: 0px 5px 5px #000;
}
li a:hover .underline {
    cursor: pointer;
    text-decoration: none;
    color: rgba(255, 255, 255, 1);
}
.underline:hover {
    border-bottom: #FFFFFF solid 2px;
}

Answer 3

你想在悬停上添加一个盒子阴影效果，对吧？您不需要使用.underline之类的额外元素。只需将其添加到li a:hover

即可

li a:hover {
    cursor: pointer;
    text-decoration: none;
    color: rgba(255,255,255,1);
    box-shadow: 0 1px 0 0 rgba(0,0,0,1);
}

您可以在W3C上阅读更多关于伪元素的内容：之前和之后：http://www.w3schools.com/css/css_pseudo_elements.asp

我使用以下代码制作了一个小型演示：在悬停之前：http://jsfiddle.net/m9czpzs5/