伪元素悬停和文字修饰

考虑下面的HTML：伪元素悬停和文字修饰

<a href="#"><span data-icon="✪"></span>A Link</a>

是否有可能改变text-decoration（无人）悬停？ color将改变，text-decoration不会。

CSS：

a { text-decoration: none; } 
a:hover{ text-decoration: underline; } 
a:hover [data-icon]:before{ 
    /*Doesn't work*/ 
    text-decoration: none; 

    /*Works*/ 
    color: red; 
}

jsfiddle

来源

2013-07-12 Mike Henderson

我没有看到锚红色的工作，这是工作的跨度，文字装饰来自锚点而不是跨度。你正在寻找的最终结果是什么？强调文字而不是图标？要么？？ – Huangism

@Huangism我不想强调图标上的下划线。 –

你想在A Link文本上加下划线吗？ – Huangism

正如我在this other answer解释，你可以使用display: inline-block防止text-decoration设置为祖先从传播到您的元素：

a { 
 
    text-decoration: none; 
 
} 
 
a:hover { 
 
    text-decoration: underline; 
 
} 
 
a > [data-icon]:before { 
 
    display: inline-block; /* Avoid text-decoration propagation from `a` */ 
 
    content: attr(data-icon); 
 
} 
 
a:hover > [data-icon]:before { 
 
    color: red; 
 
}

<a href="#"><span data-icon="✪"></span>A Link</a>

来源

2013-07-12 20:46:53 Oriol

的行为与OP小提琴完全不同。 – Huangism

我认为这将起作用，谢谢@Oriol。 –

当你悬停的时候，整个锚点都会移位 – Huangism

让事情更加容易，并分离出

http://jsfiddle.net/nyFxn/2/

<a href="#"><span data-icon="✪"></span><span class="text">A Link</span></a>

CSS

a:hover{ text-decoration: none; } 
a:hover [data-icon] { 

    /*Works*/ 
    color: red; 
} 
a:hover .text { 
    text-decoration: underline; 
}

来源

2013-07-12 20:53:37 Huangism

-1

使用在所有的浏览器，但IE display: inline-block作品。要使其在IE8 +中工作，请将overflow:hidden添加到包含图标的伪元素。

如果下划线仍停留在IE浏览器，伪元素上设置line-height: 1，所以在总你

a [data-icon]:before { 
    display: inline-block; 
    overflow: hidden; 
    line-height: 1; 
}

来源

2014-03-07 09:47:47 herrschuessler

伪元素悬停和文字修饰

回答

相关问题