34

作为标题,我正在使用.icon-*. 向超链接添加图标时:

<a href="#" class="icon-email icon-large">Email me!</a>

属性插入的内容content在悬停时显示下划线文本装饰。我想禁用text-decoration之前唯一的内容:

[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: 'IcoMoon';
    font-style: normal;
    speak: none;
}
.icon-mail:before {
    content: "\37";
}
[class^="icon-large-"]:before, [class*=" icon-large"]:before {
    font-size: 48px;
    line-height: 48px;
}
a[class^="icon-"]:before, a[class*=" icon-"]:before {
    margin-right: 5px;
    vertical-align: middle;
}

我已经尝试过了,但它不起作用(装饰仍然可见):

a[class^="icon-"]:hover:before, a[class*=" icon-"]:hover:before {
    text-decoration: none;
    color: white;
}
4

6 回答 6

50

插入显示:inline-block;在你的 CSS 中。类似于以下内容:

.icon-mail:before {
    content: "\37";
    display:inline-block;
    text-decoration:none;
}

这是 JS 小提琴:

http://jsfiddle.net/73p2k/18/

于 2014-05-14T08:02:06.717 回答
30

由于伪元素被渲染为其生成元素的后代框:before更具体地说,就在第一个子内容框之前),它遵循与正常后代框有关的相同规则text-decoration

后代元素上的 'text-decoration' 属性不能对祖先元素的装饰产生任何影响。

有关更多详细信息,请参阅这些答案:

没有任何好的方法可以解决这个问题......唯一可以立即想到的选择是:

  • 将文本包装在自己的span元素中,然后应用text-decoration到 that span如 skip405 所示。缺点当然是额外的标记。

  • 在您的伪元素中使用内联块背景图像而不是图标字体中的内联文本:before(我还更正了与您的类选择器的不一致):

    [class^="icon-"]:before, [class*=" icon-"]:before {
        display: inline-block;
        width: 1em;
        height: 1em;
        background-size: contain;
        content: "";
    }
    .icon-email:before {
        background-image: url(icon-mail.svg);
        background-repeat: no-repeat;
    }
    .icon-large:before {
        width: 48px;
        height: 48px;
    }
    a[class^="icon-"]:before, a[class*=" icon-"]:before {
        margin-right: 5px;
        vertical-align: middle;
    }
    

    与 skip405 的解决方案相比,它的优点是您不必修改 HTML,但鉴于它使用SVG 矢量背景图像background-size它在 IE8 中不起作用。

    如果您确实需要 IE8 支持,那么您必须回退到位图图像:

    .icon-email:before {
        background-image: url(icon-mail.png);
    }
    .icon-email.icon-large:before {
        background-image: url(icon-mail-large.png);
    }
    
于 2012-07-14T04:41:23.580 回答
4

您可以为 :before 元素设置高度和溢出:隐藏,并且文本装饰将不可见:)

于 2012-11-14T10:08:51.140 回答
4

伪元素选择器必须是选择链中的最后一项。

您可以将样式应用于element:hover:before但不能应用于element:before:hover.

于 2012-07-13T16:49:18.667 回答
2

a仅使用标签作为标记尝试了一些事情,但是唉。您可能的解决方法可能是将链接内部包装在另一个元素中,span例如 a 。因此,您可以在此元素(而不是伪元素)上添加下划线 - 这完全由 css 控制。

一个活生生的例子在这里:http: //jsfiddle.net/skip405/fQHUH/

于 2012-07-13T19:52:14.703 回答
0

这个解决方案对我有用。它排除了伪元素。但是为此,您需要将<a>标签的内容包装到一个额外的元素中。

a:hover { text-decoration: none; }
a:hover > * { text-decoration: underline; }


<a href="#"><span>content</span></a>
于 2021-08-03T15:56:33.560 回答