使用：锚元素之后的伪元素 - 浏览器差异

Question

我有一个<a>元素，之后我想使用>伪元素显示:after符号。

<a>元素的内容是动态的，因此其宽度会发生变化，有时内容事件会跨越几行（因为此<a>元素位于<div>内，其宽度是固定的）

我希望>的水平位置从最长行的末尾开始。也就是说，当我给它right:0;规则时，它应该在元素的最右边（垂直位置现在无关紧要）：

这就是它在FF中的表现方式，但在Chrome和IE中，>出现在最短行的末尾：

我想了解导致浏览器差异的原因，但更重要的是，我希望所有浏览器都像FF一样 - 将:after放在最长行的末尾。这可能吗？

我把the above code放在dabblet上

Answer 1

这是因为默认情况下您的a元素设置为显示inline，并且Firefox处理inline个元素内的定位与Chrome和IE略有不同。

要在Chrome和IE中修复此问题（同时保留Firefox中的外观），只需为a元素显示inline-block即可：

a {
    position:relative;
    display:inline-block;
}

Modified Dabblet demo