css - 将图标字体中的图标显示为带有下划线的 anchor 中的伪元素

Question

我想在具有 rel="external"属性的任何 anchor 元素上显示“外部”图标。我最初使用的是图像，但这不能很好地随字体大小缩放，我想最大限度地减少我们使用的图像数量。

我们对网站上的其他图标使用 font-awesome，并且通常将这些图标包含在 .fa-* 类的特定图标元素中。然而，对于外部链接，我想简单地使用 CSS 来定位它们，并使用 :after 伪选择器应用图标。

这是我到目前为止所拥有的 CSS，在 iOS 和 Firefox 中可以正确渲染，但在 Chrome 中它会超出一两个像素，并且 anchor 的下划线明显未对齐。我用过 CSS content值前面有两个空格以包含图标。

a[rel="external"]:after {
  content: "\00a0\00a0\f08e";
  font-family: FontAwesome;
  font-size: 0.7em;
  line-height: 1;
}

这是一个显示行为的 jsfiddle:http://jsfiddle.net/hcharge/b9L3o5c5/2/

有人知道如何让它在浏览器中一致显示吗？或者我被迫恢复使用图像？

编辑:我应该补充一点，使用底部边框不是一个选项，因为它无法充分控制边框与文本底部的距离。

Answer 1

我一发布这篇文章，我就灵机一动，因为我还没有找到任何其他内容，所以我将在这里发布答案。

如果我们使用 after 元素在文本后面添加一些额外的空格:

a[rel="external"]:after {
  content: '\00a0\00a0\00a0\00a0';
}

并将外部链接设置为相对位置，然后我可以将图标设置为显示为 :before 元素并将其绝对定位在右侧。

a[rel="external"] {
  position: relative;
}

a[rel="external"]:before {
  content: "\f08e";
  font-family: FontAwesome;
  font-size: 0.7em;
  position: absolute;
  bottom: 2px;
  right: 0;
  text-decoration: none;
}

这是一个 fiddle ... http://jsfiddle.net/hcharge/b9L3o5c5