Как сделать так, чтобы буквы не перегораживали нижнее подчёркивание у ссылки?

Question

Очень бесит что буквы "ф" и "ц" перегораживают нижнее подчёркивание. Подскажите пожалуйста, как это можно исправить?

Answer 1

помогло text-decoration-skip-ink: none;

Answer 2

Можно например сделать text-underline-position: under; (Линия расположена под текстовым контентом элемента)

a {
  text-underline-position: under;
}

<body>
   <h1>
     <a href="#">
      My link</a>
   </h1>
</body>

Все варианты можно посмотруть здесь

Можно использовать offset (смещение) у стиля text-decoration

a {
 text-decoration: underline;
  text-decoration-color: blue;
  text-underline-offset: 0.75em;
  /*text-underline-position: under;*/
}

a.test {
 text-underline-offset: 0.1em;
}

<h1><a>Специальное учебное заведение</a> </h1>
<br><br>
<h1><a class="test">Специальное учебное заведение2</a> </h1>

БЛОГ НА HUSL

Как сделать так, чтобы буквы не перегораживали нижнее подчёркивание у ссылки?

Ответы (2 шт):