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

Posted 2023-03-05

【中文标题】在锚元素之后使用 :after 伪元素 - 浏览器差异

【英文标题】：Using :after pseudo element after anchor element - browser differences

【发布时间】：2013-11-08 09:13:26

【问题描述】：

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

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

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

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

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

我把the above code 放在小键盘上

【问题讨论】：

您的a 元素是一个相对定位的内联元素，它是绝对定位的:after 伪元素的包含块。问题是a 中的文本是多行的，spec 表示在这种情况下它没有定义包含块的形状或尺寸。这就是您看到浏览器行为差异的原因 - 换句话说，浏览器不知道在这种情况下该做什么，所以他们会做他们认为最好的事情。

【参考方案1】：

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

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

a 
    position:relative;
    display:inline-block;

Modified Dabblet demo.

【讨论】：

非常感谢！但是，我对这个解决方案有两个问题：1）> 的位置仍然存在浏览器差异。 Chrome 将其定位在 FF 的右侧。 2）这意味着链接文本很短，> 将远离它的结尾。我希望 > 位于链接文本的末尾...

@LeaCohen 这似乎是由文本呈现的差异引起的。在 Firefox 中，“hkfjg sdfg dsfjg jsdflgj ldsfjgl”部分在进入新行之前几乎填充了 200px 容器，但在 Chrome 中，该部分大约有 20px 不同。我不知道有什么建议可以解决这个问题，因为这是由浏览器（以及用户可能启用的任何基于浏览器字体的设置）控制的，而不是计算的 CSS。