Css 将图标字体中的图标显示为带下划线的锚点中的伪元素

我想在任何具有rel=“external”属性的锚元素上显示一个“external”图标。我最初使用的是一幅图像，但它不能很好地适应字体大小，我想尽量减少我们使用的图像数量

我们在整个网站上使用font awesome作为其他图标，通常在.fa-*类中包含带有特定图标元素的图标。然而，对于外部链接，我只想使用CSS将其作为目标，并使用：after伪选择器应用图标

这是我到目前为止使用的CSS，在iOS和Firefox中可以正确渲染，但在Chrome中只有一两个像素，锚点的下划线明显错位。我使用了前面有两个空格的值来包含图标

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

下面是一个显示行为的JSFIDLE：

有没有人知道一种方法可以让它在不同的浏览器中一致地显示？还是我被迫恢复使用图像

---

编辑：我应该补充一点，使用底部边框不是一个选项，因为它不允许对边框与文本底部的距离进行足够的控制。

几乎在我发布这篇文章时，我就有了一点想法，因为我没有在这方面找到任何其他东西，所以我将在这里发布答案

如果我们使用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;
}

这是一把小提琴

---

您必须使用相同的字体来显示正文和图标，而且效果很好。

目前我无法访问许多浏览器，但我希望这对您有用

a {
    border-bottom: 1px solid;
    text-decoration: none;
}

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

---

编辑：作为对您评论的回应，我唯一能建议的就是这样做。这个想法取自

为了正确定位，您应该添加通常由类“.fa”提供的所有属性。“.fa”在引擎盖下做了很多定位工作

---

如果您使用的是类似sass（或compass/burbon类型的框架），则可以在“a[rel=“external”]：after”规范中简单地“@include.fa”。

使用边框恐怕行不通，因为您无法控制文本底部和边框之间的距离，而且它显示得太远。谢谢，这个评论被复制了。我无法将body字体系列设置为fontawesome，因为我在实际使用中使用了不同的字体solution@hcharge如果字体不同，则字母/符号与线条之间的间距将不同。同一字体是唯一带有下划线的解决方案。@hcharge是的，并将其评级为高！。但是我的答案也适用于代码，而不需要创建新类。是的，你是对的，通常我不必担心，但这让我很烦！谢谢：-）使用边框恐怕不行，因为您无法控制文本底部和边框之间的距离，而且它显示得太远。谢谢

a {
    border-bottom: 1px solid;
    text-decoration: none;
}

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