css - 点線の下線リンクのギャップを減らすには?

Question

点線の下線付きスタイルのカスタム リンクがあります。

どうすればギャップを減らすことができますか？現在padding: 0;、動作しline-heightていません。

Answer 1

これは少し冗長な試みですが、本当にギャップを埋めたい場合は、アンダースコアを再作成する絶対に配置された疑似要素を追加してみてください。

これが私のフィドルです。

編集：これは、OPのスタイルを使用する前と使用した後のコメントで@bradchristieによって更新されたフィドルです。

そしてこれが私の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; }