css - 选择器 :hover. 悬停前应用的类

Question

我想应用链接选择器悬停效果，其中包括无序列表中的底部边框下划线。真的，我知道我可以使用边框底部做一个简单的下划线:#FFFFFFsolid 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 中的一个选择器上正确使用多个类。

这是我所拥有的 JSFiddle(已损坏)http://jsfiddle.net/jellis3d/a8svpwr4/2/ 。这也是我所追求的图片。为了显示我正在寻找的内容，我确实夸大了下划线。该线也不必具有圆形边缘。

Answer 1

您可以通过将 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;
}