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

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

我的边界一直在显示，而不仅仅是在我悬停的时候

当我尝试向.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中的一个选择器上正确使用多个类

这是我的一堆东西（破的）。这里还有一张我想要的照片。我真的夸大了下划线，以显示我在寻找什么。线也不必具有圆角边。

---

您想在悬停时添加框阴影效果，对吗？您不需要使用额外的元素，如

。下划线
。只需将其添加到
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上阅读更多关于伪元素的信息，如：before和：after：

我使用：before on hover:
对您的代码做了一个小演示，我在js fiddle上做了一个基本演示，展示了我对您的想法


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

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

您可以通过将
边框底部
应用于
。下划线：悬停
和
框阴影
和
显示：内联块到
li a
标记

JSFiddle-
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>

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

它对我来说很好，JSFIDLE demo[编辑]-我上传了一个演示和一张图片。@Jhaller是星期五的好。。但是我到家后看到了你的回复，上面显示的内容并不准确，但显示的内容是一样的，但每个元素都像一个大键琴，一个在另一个之上，让我知道你的想法，我会回复你的asap@Jhaller“我的边框一直都在显示，而不仅仅是在我悬停的时候。”-你想让边框悬停吗？像这样-好的。我刚更新了小提琴。我注意到小提琴并没有使文本在悬停时100%变白。然而，在我的本地机器上，使用Aptana和Firefox（最新版本）它可以工作。另一件事是，当鼠标从屏幕的左侧移入，并在鼠标离开时平滑地淡出或消失。@Jhaller现在它是白色文本-我正在处理第二点…对Fiddle进行了更新。看来我们走对了方向。谢谢你的帮助。