html - 在锚元素之后使用 :after 伪元素 - 浏览器差异

Question

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

元素的<a>内容是动态的，因此它的宽度会发生变化，有时内容事件会跨越几行（因为这个<a>元素在<div>who 的宽度是固定的）。

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

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

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

我把上面的代码放在dabblet上

Answer 1

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

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

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

修改后的 Dabblet 演示。