問題描述

作為標題，我使用 .icon-* 添加圖標.向超鏈接添加圖標時:

As title, I'm adding icons using .icon-*. When adding an icon to an hyperlink:

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

content 屬性插入的內容在懸停時顯示下劃線文本裝飾.我想只為之前的內容禁用 text-decoration:

The content inserted by content property shows the underline text-decoration on hover. I'd like to disable the text-decoration only for the content before:

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

我試過了，但它不起作用(裝飾仍然可見):

I've tried this but it's not working (decoration is still visible):

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

推薦答案

作為 :before偽元素被渲染為其生成元素的后代框(更具體地說，就在第一個子內容框之前)，它遵循 它的正常后代框對 text-decoration 的規則相同:

As the :before pseudo-element is rendered as a descendant box (more specifically, just before the first child content box) of its generating element, it obeys the same rules its normal descendant boxes do with respect to text-decoration:

后代元素的'text-decoration'屬性不能對祖先元素的裝飾產生任何影響.

The 'text-decoration' property on descendant elements cannot have any effect on the decoration of the ancestor.

有關詳細信息，請參閱這些答案:

See these answers for more details:

• CSS text-decoration 屬性不能被子元素覆蓋
• 我該怎么做讓這個 CSS 文本裝飾覆蓋工作?

沒有什么好辦法解決這個問題...唯一能立即想到的選擇是:

There isn't any good way around this... the only alternatives that come immediately to mind are:

• 將文本包裝在其自己的 span 元素中，然后將 text-decoration 應用于該 span，如skip405所示.缺點當然是額外的標記.

• Wrap the text in its own span element, then apply text-decoration to that span, as shown by skip405. The disadvantage is, of course, extra markup.

在您的 :before 偽元素中使用內嵌塊背景圖像而不是圖標字體中的內嵌文本(我還更正了與您的類選擇器的不一致):

Use an inline block background image instead of inline text in an icon font with your :before pseudo-element (I've also corrected the inconsistencies with your class selectors):

[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 中無法使用.

The advantage this has over skip405's solution is that you don't have to modify the HTML, but given that it uses SVG vector background images and background-size, it won't work in IE8.

如果您確實需要 IE8 支持，那么您必須回退到位圖圖像:

If you do need IE8 support, then you have to fall back to bitmap images:

.icon-email:before {
    background-image: url(icon-mail.png);
}
.icon-email.icon-large:before {
    background-image: url(icon-mail-large.png);
}

這篇關于:hover:before text-decoration none 沒有效果?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！