css - 如何减少虚线下划线链接的间隙？

Question

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

我怎样才能减少差距？目前padding: 0;并且line-height不工作。

Answer 1

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

这是我的小提琴。

编辑：这是@bradchristie 在评论中更新的小提琴，其中包含使用 OP 样式之前和之后的内容。

这是我的 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; }