html - 使用 :after pseudo element after anchor element - browser differences

Question

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

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

我想要 >从最长行的末尾开始的水平位置。也就是说，当我给它 right:0;规则，它应该在元素的最右边(垂直位置现在不重要):

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

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

我把the above code在水滴上

Answer 1

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

要在 Chrome 和 IE 中修复此问题(同时保留在 Firefox 中的外观)，只需为您的 a 元素提供一个 inline-block 显示:

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

Modified Dabblet demo .