html - 如何将堆叠图标添加到锚链接

Question

我准备了以下示例：

http://jsfiddle.net/NSGRq/1/

是否可以仅使用 CSS 来在圆圈图标悬停时为“电子邮件”下划线？

<ul class="inline">
    <li><a class="icon-stack" title="Email" href="mailto:info@info.com">
                <i class="icon-circle icon-stack-base"></i>
                <i class="icon-envelope" style="color: white;"></i> 
        </a><a title="Email" href="mailto:info@info.com">Email</a>
    </li>
   </ul>

也可以删除完全相同的重复标签吗？

<a class="icon-stack" title="Email" href="mailto:info@info.com">
<a title="Email" href="mailto:info@info.com">Email</a>

谢谢

Answer 1

很难确切地说出您的要求是什么，但这是一种可以采用的方法。

http://jsfiddle.net/yXWpu/

HTML

<ul class="inline">
    <li><a class="icon-stack" title="Email" href="mailto:info@info.com">
                <i class="icon-circle icon-stack-base"></i>
                <i class="icon-envelope" style="color: white;"></i> 
        <span class="email-text">Email</span></a>
    </li>
</ul>

CSS

.icon-stack {
    font-size: 32px;
}

a[class^="icon-"], i[class^="icon-"] {
    text-decoration: none;
    color: #1BA1E2;
}

a[class^="icon-"] .email-text {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 10pt;
    margin-left: 65px; 
}

a[class^="icon-"]:hover .email-text {
    text-decoration: underline;
}