:hover:before text-decoration没有没有效果? [英] :hover:before text-decoration none has no effects?
问题描述
作为标题,我使用 .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;
}
我试过了,但它不工作
a[class^="icon-"]:hover:before, a[class*=" icon-"]:hover:before {
text-decoration: none;
color: white;
}
推荐答案
由于 :之前
伪元素被渲染为其生成元素的后代框(更具体地,恰好在第一子内容框之前),它遵守 text-decoration a>:
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 property cannot be overridden by child element
- How do I get this CSS text-decoration override to work?
没有任何好的方法围绕这个...唯一的选择立即想到的是:
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 applytext-decoration
to thatspan
, as shown by skip405. The disadvantage is, of course, extra markup.
使用inline block背景图片代替图标字体中的内嵌文字,并使用 :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没有没有效果?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!