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

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;
}