如何减少虚线下划线链接的差距？

Question

我们有带下划线样式的自定义链接。

如何缩小差距？目前padding: 0;和line-height无效。

Answer 1

这是你可以尝试的有点冗长的东西，但如果你真的想缩小差距，你可以尝试添加一个绝对放置的伪元素来重新创建下划线。

这是我的Fiddle。

编辑：这是@bradchristie在使用OP的样式之前和之后的评论中更新的Fiddle。

这是我的CSS：

a {
  background: #ff0;
  color: #f00;
  position: relative;
  text-decoration: none;
}

a::after {
  border-bottom: 1px dotted #f00;
  bottom: 3px;
  content: '';
  height: 0;
  left: 0;
  position: absolute;
  right: 0;
}

Answer 2

由于您没有使用下划线而是底部边框，因此空间可以容纳可能存在的任何文本，包括可能出现在基线下方的下行和变音符号。所以你需要打败正常的行格式，例如通过使用降低内容高度的技巧，例如通过设置

a { display: inline-block; line-height: 0.8; height: 0.8em; }