：伪后不考虑方向（rtl）？ （火狐）
我有这个 css 在每个外部链接后面放置一个图标：
a[target="_blank"]:after {
background: url("images/external_icon.png") 0 0 no-repeat;
border: 0 none;
content: "";
padding: 0 14px 0 0;
}
如果我想更改为 :before ，图标将出现在链接前面。到目前为止，一切都很好。
但在我的从右到左版本的网站中，使用 direction: rtl; 时，图标仍然显示在元素的右侧，而不是“翻转”到另一侧。更改为 :before 仍会使图标显示在元素的右侧。
这是一个已知的 FF 错误吗？还有其他解决办法吗？ （在 Chrome 中工作正常）
I have this css to put an icon after each external link:
a[target="_blank"]:after {
background: url("images/external_icon.png") 0 0 no-repeat;
border: 0 none;
content: "";
padding: 0 14px 0 0;
}
If I would to change to :before instead, the icon will appear in front of the link instead. So far, so good.
But in my right-to-left version of the site, while using direction: rtl;, the icon still appears to the right of the element, instead of being "flipped" to the other side. Changing to a :before will still make the icon appear to the right of the element.
Is this a known FF bug? Is there any other solution?
(Works fine in Chrome)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
好的，所以我找到了解决方案。改为内联块。
解决方案很简单，但实现这一目标并不总是那么容易。
我仍然觉得问题中的 css 可能是浏览器错误？
Ok, so I found a solution. Make it inline-block instead.
Simple solution, but getting there isn't aslways as easy.
I still feel like the css from the question might be a browser bug?
Firefox 的行为似乎是正确的：
:after的渲染应该与在a[target="_blank 末尾插入这些样式的空跨度”的渲染相同“]。如果您尝试这样做，您会在 Chrome 和 Firefox 中获得相同的行为，并且它与 Firefox 的:after行为相匹配。不过，您可能想要提交 WebKit 错误。
The Firefox behavior seems to be correct: the rendering of the
:aftershould be the same as the rendering of an empty span with those styles inserted at the end of thea[target="_blank"]. If you try that, you get identical behavior in Chrome and Firefox, and it matches the Firefox behavior for:after.You may want to file a WebKit bug, though.