Как убрать линии под бейджиками в GitHub README

При оформлении репозитория многие разработчики сталкиваются с проблемой: бейджики из Shields.io или других сервисов отображаются с нежелательными линиями (подчёркиванием) на GitHub, хотя в редакторе кода (например, VS Code) они видны только при наведении. Чаще всего это происходит из-за стандартного стиля ссылок <a>, который GitHub применяет ко всем интерактивным элементам.

Почему появляются линии у бейджиков

Бейджики обычно оборачиваются в тег <a href="..."> для перехода по ссылке. GitHub автоматически добавляет text-decoration: underline для всех ссылок, что и создаёт видимые линии. В VS Code предпросмотр может использовать свои стили, поэтому линии видны только при наведении.

Как исправить проблему

Есть два простых способа убрать линии у бейджиков в README.md:

Способ 1: Добавить атрибут style к тегу <a>

Укажите style="text-decoration: none;" прямо в HTML-коде бейджика. Пример:

<a href="https://github.com/ваш-репозиторий/releases" style="text-decoration: none;">
  <img src="https://img.shields.io/badge/Версия-1.0.0-blue" alt="Версия" />
</a>

Этот метод работает на всех платформах, включая GitHub, и не требует дополнительных файлов.

Способ 2: Использовать CSS в глобальном стиле (если есть)

Если вы используете кастомный CSS в проекте (например, для документации), добавьте правило:

a img { text-decoration: none; }

Но для README на GitHub этот способ не подходит, так как CSS не поддерживается в Markdown-файлах.

Почему линии видны только на GitHub

GitHub применяет свои стили для отображения Markdown-файлов, включая text-decoration: underline для всех ссылок. В VS Code предпросмотр использует локальные настройки темы, где подчёркивание может быть скрыто до наведения курсора. Это нормальное поведение, которое легко исправить добавлением атрибута style.

Советы по оформлению бейджиков

• Используйте style="text-decoration: none;" для каждой ссылки с бейджиком.
• Проверяйте отображение на GitHub после коммита - локальный предпросмотр может отличаться.
• Для больших наборов бейджиков используйте контейнер <p align="center"> с тем же стилем.

Пример исправленного кода

<p align="center">
  <a href="https://github.com/Dimentiy-cmd/Discord-Log-Hub/releases" style="text-decoration: none;">
    <img src="https://img.shields.io/badge/Версия-1.0.0-blue?style=for-the-badge&logo=github" alt="Версия" />
  </a>
  <a href="https://opensource.org/licenses/MIT" style="text-decoration: none;">
    <img src="https://img.shields.io/badge/Лицензия-MIT-green?style=for-the-badge&logo=opensourceinitiative" alt="Лицензия" />
  </a>
</p>

После добавления style="text-decoration: none;" линии исчезнут, и бейджики будут выглядеть аккуратно как на GitHub, так и в других инструментах.