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

IE似乎不喜欢

文本装饰：无为
a:before
伪元素（或伪类）定义

这是一把JS小提琴：

我希望“>”会丢失下划线。它可以在FF、Chrome和Safari中使用，但不能在IE中使用。使用IE10和IE9进行测试

问题是：
在

元素丢失下划线之前，我可以尝试使

元素丢失下划线的任何解决方法吗？最好是在IE9中+

有关于这个的错误报告吗？或者它实际上是按照标准来的？
不确定标准是怎么说的，但IE的行为似乎更符合逻辑。将：before视为


a{
文字装饰：下划线；
}
跨度：之前{
内容：“>”；
}
如果背景为白色，则可以使用底部边框：

a {
    text-decoration: none;
    border-bottom:1px solid blue;
}

a:before {
    content: "> ";
    border-bottom:1px solid white;
}

IE在这里似乎出错了，因为代码中的
display:block
应该删除下划线。根据CSS 2.1规范第16.3条，“用户代理不得在非文本内容上呈现这些文本装饰。例如，图像和内联块不得加下划线。”

目前似乎没有关于这方面的报告

在这种情况下，合适的解决方法可能是使用图像作为生成的内容：

a:before {
    content: url(arrow.png);
}

其中arrow.png表示一个合适的小图标。中介绍了
content
中
url（…）
的使用，这是一个严重过时的草案（最后一个版本是2003年的），但这一部分已在浏览器中广泛实现。但在IE7中没有。因此，如果您希望覆盖IE 7，请考虑@ EuGeNexa的回答中的方法，可能使用JavaScript动态生成额外的标记。
 < P>这对我来说是有效的：

html:

在这里，before标记仍然是锚的一部分。
我知道这是一个相当老的线程，但是在IE 11中遇到了这个问题，并且找不到太多帮助，我决定进行实验。在一个比早期版本有了显著改进的开发工具的帮助下，我设法找到了它——不管怎样，对于我正在进行的工作。虽然你可能需要调整，但它也可能对其他人有效。YMMV

HTML：

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

秘方设置高度，
溢出：隐藏行；这意味着下划线仍然在那里，但在伪元素提供的视口之外，因此永远不会在屏幕上看到。它也适用于其他浏览器（在Chrome和Firefox上也进行了测试）。根据您现有的样式，您可能需要调整
calc（）
值中的像素值

请参见
另一种解决方案是设置一个小的
行高度（
高度
也可以），并设置
溢出：隐藏
，以便下划线消失

我知道这不是最好的解决方案，因为行高值取决于您使用的字符。在本例中，0.6是一个很好的值，但对于另一个字符可能不是

在我的例子中，这是一个很好的解决方案，因为我只有一个固定字体大小的特定字符

a {
    text-decoration: underline;
}

a:before {
    content: ">";
    display: inline-block;
    text-decoration: underline; /* simulate IE behavior */
    line-height: 0.6; /* line-height must be smaller than font-size */
    overflow: hidden;
}

+1是的，但这会使事情复杂化，我希望在不添加额外元素的情况下这样做。想想tinyMCE编辑器，然后对
应用一个类，让它看起来与众不同。我想这就解释了为什么它（应该）不可能：我害怕这样的事情。
显示：内联块
似乎在其他浏览器中发挥了一些作用。背景是渐变：（我想提到的是，文本装饰是在父元素上呈现的，父元素是内联文本元素。
url（）的使用）
content
中的
对于CSS3来说并不新鲜。它被列为中的一个可能值。这就是为什么它在IE中从版本8开始以及所有其他浏览器中都可用的原因。我们都可以通过添加新的HTML元素来制作火箭飞船：）诀窍是这样做而不改变HTML结构。为什么？哦，我很想更改HTML结构，但不幸的是，在这种情况下，我无法控制它。它是由第三方JavaScript库生成的等等…对我来说不起作用。在IE11Win8.1中尝试过，这里有一个JSBin：你能让它在JSBin中工作吗？老鼠！为了简洁起见（这是一个正在进行的项目的一部分），我正在从less转换为CSS，显然缺少了一些东西。我将启动一个虚拟机，然后再试一次。+1现在可以了！请注意，一些字母和特殊字符将在底部被截断：
y，g，j，µ，|，{，[,，▼等。我想通过一些关于线条高度等的实验，你也许可以解决这个问题。我没有机会-在我正在开发的网站上，我们使用图标字体在链接前提供一个指示器，对于这样的目的，这是一个完美的修复：）这是一个很好的破解，谢谢你！它肯定会有用的。我是just注意到了切掉低挂字母的问题。我不需要找到解决方法，尝试了
行高
，
填充
，
边距
，等等。可能有效的方法是将父元素上的
显示：表格单元格
和
显示：表格
，以及
垂直对齐：顶部
，但可能……这是可行的，但请注意，像“j”、“g”、“y”和“q”这样的字符的下半部分将被切掉。但这对“>”来说不是问题：）
a {
  text-decoration: none;
}
a span {
  text-decoration: underline;
}
a:before {
  content: ">";
}

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

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: ">";
}

a {
    text-decoration: underline;
}

a:before {
    content: ">";
    display: inline-block;
    text-decoration: underline; /* simulate IE behavior */
    line-height: 0.6; /* line-height must be smaller than font-size */
    overflow: hidden;
}