在Firefox中,`a:before`的不透明度被`a`覆盖

Question

我有一个链接.我正在用:before它放一个图标.最初,文本是不可见的(opacity: 0),而图标是可见的(opacity: 1).悬停时,文本将变为可见.我使用不透明度而不是可见性或显示,因为我需要它来使用过渡属性.

我发现通过将:before元素设置为可以在Chrome中执行此操作display:block(没有这个,它会拒绝与链接的其余部分不同的不透明度).不幸的是,我还发现,即使添加了这个,Firefox也不会让它具有与链接其余部分不同的不透明度.

我可以在这里查看我正在使用此效果的页面(这里是codepen源代码),但我已将问题简化为最简单的形式并在下面重现.

的jsfiddle

a {
    opacity: 0.5;
}
a:before {
    display: block;
    float: left;
    opacity: 1;
    content: "+";
}

<a href="#">Sample Text</a>

正如您所看到的,在Chrome中(我使用v36.0 x64 for RPM Linux),加号完全不透明,而文本部分透明.这是预期的行为.但是,在Firefox(我使用v31.0 x64 for RPM Linux)中,整个过程是部分透明的.

我应该提一下,我的项目有一些规定限制了我的选择.首先,我无法更改HTML,因为它都是从荒谬的通用降价生成的.其次,我没有使用图像.然而,从好的方面来说,我不需要支持旧的浏览器.

哪个浏览器的实现是"正确的"？有没有更好的方法来实现我所描述的效果？除了更强大的解决方案,还有一种解决方法吗？

Answer 1

:before 伪元素实际上是在您应用它的元素内部呈现的,因为它是作为元素中内容之前的内容.

opacity还得继承所有子元素,因此您必须更改标记以实际拥有div之外的元素.在http://www.w3.org/TR/css3-color/#transparency上阅读有关透明度规格的内容

或者您可以使用rgba()设置文本的颜色 - 当然,这种方法只有在您操纵背景或文本颜色时才有效,但至少是一致的跨浏览器.

您在Firefox中遇到的行为可能是Firefox错误,因为其他浏览器呈现与chrome相同(测试的chrome,opera和Internet Explorer具有相同的结果).

a {
    color:rgba(0,0,0,0.5);
    font-size:60px;
    font-weight:bold
}
a:before {
    display: block;
    float: left;
    opacity: 1;
    content: "+";
    color:rgba(0,0,0,1);

}

<a href="#">Sample Text</a>