问题描述
作为标题,我使用 .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); }