css - 在 IE 中对 css 生成的内容应用文本装饰

Question

IE 似乎不关心为 a:before 伪元素(或伪类)定义的 text-decoration: none;。

这是一个 JS fiddle :http://jsfiddle.net/9N35f/
我希望“>”失去下划线。它在 FF、Chrome 和 Safari 中有效，但在 IE 中无效。已使用 IE10 和 IE9 进行测试。

问题:

我可以尝试使 :before 元素失去下划线的任何解决方法吗？最好在 IE9+ 中

某处有关于此的错误报告吗？还是实际上符合标准？

Answer 1

我知道这是一个相当古老的线程，但刚刚在 IE 11 中遇到这个问题，并且无法找到太多帮助，我决定进行试验。在比早期版本显着改进的开发工具的帮助下，我设法弄明白了——无论如何我正在做的事情。尽管您可能需要进行调整，但它很可能也适用于其他人。 YMMV.

HTML:

<li><a href="#">Whatever</a></li>

CSS(在@frnhr 指出我发布的初始版本实际上不起作用后编辑):

a {
    display: block;
    position: relative;
    padding-left: 15px;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:before {
    position: absolute;
    left: 0;
    top: 0;
    height: calc(100% - 2px);

    overflow: hidden;

    content: ">";
}

秘诀是设置高度和 overflow: hidden; 行；这意味着下划线仍然存在，但在伪元素提供的视口(viewport)之外，因此永远不会在屏幕上看到。它还适用于其他浏览器(也在 Chrome 和 Firefox 上测试过)。根据您现有的样式，您可能希望调整 calc() 值中的像素值。

参见 http://jsbin.com/biwomewebo/1/edit?html,css,output