Подчеркивание ссылок красивое и тонкое, а в Firefox жирное и некрасивое! Что можно сделать?

Ох и намучился я с отображением ссылок в своей блочной теме. Везде все тонко и красиво, а мой основной браузер Firefox отображает их просто ужасно!

Оказалось, это — известная особенность Mozilla Firefox. Он по-другому рисует text-decoration у ссылок.
По умолчанию Firefox делает линию толще, чем Google Chrome или Microsoft Edge и даже Яндекс.

Хорошая новость — это легко исправляется через современные CSS-свойства.

Лучшее решение для Firefox

Добавьте в style.css:

a {
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

Что это делает

• text-decoration-thickness — делает линию тоньше
• text-underline-offset — немного опускает её ниже текста (выглядит аккуратнее)

Меня это устроило в моем проекте, но вы можете пойти дальше. Я испробовал еще и такие стили.

Ещё более аккуратный вариант (как на новостных сайтах)

a {
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-skip-ink: auto;
}

text-decoration-skip-ink — линия не пересекает буквы, выглядит очень красиво.

Если нужно исправить только Firefox

Можно сделать так:

@-moz-document url-prefix() {
  a {
    text-decoration-thickness: 1px;
  }
}

Это правило применяется только в Firefox.

Рекомендую финальный вариант

a{
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-skip-ink: auto;
}

Он делает ссылки одинаково красивыми во всех браузерах.