Remove underlines between link badges

[Abrar74774]

Looks better this way imo

[Copilot]

Pull request overview

Updates the project README’s badge/link markup to eliminate visible underlines/gaps between linked badge images in the rendered header section.

Changes:

• Reformatted the GitHub Actions / contributors / license badges to keep <a> and <img> on the same line.
• Reformatted download-stat badges similarly.
• Reformatted Discord/X/Website badges similarly.

Comments suppressed due to low confidence (2)

README.md:17

• These badges are missing alt text. Adding alt attributes improves accessibility and provides a fallback when the badge images can’t be loaded.

    <a href="https://systeminformer.com/downloads"><img src="https://img.shields.io/github/downloads/winsiderss/si-builds/total.svg?style=for-the-badge&color=blue"/></a>
    <a href="https://somsubhra.github.io/github-release-stats/?username=winsiderss&repository=systeminformer"><img src="https://img.shields.io/github/downloads/winsiderss/systeminformer/total.svg?style=for-the-badge&color=blue&label="/></a>
    <a href="https://sourceforge.net/projects/processhacker/files/stats/timeline?period=monthly"><img src="https://img.shields.io/sourceforge/dt/processhacker.svg?style=for-the-badge&color=blue&label="/></a>

README.md:22

• These linked social badges are missing alt text. Add alt attributes to improve accessibility and provide a readable fallback if images don’t load.

    <a href="https://discord.com/invite/k2MQd2DzC2"><img src="https://img.shields.io/badge/Discord-grey?style=for-the-badge&logoColor=white&logo=discord"/></a>
    <a href="https://x.com/systeminformer"><img src="https://img.shields.io/badge/Twitter-grey?style=for-the-badge&logoColor=white&logo=x"/></a>
    <a href="https://systeminformer.com"><img src="https://img.shields.io/badge/Website-grey?style=for-the-badge&logo=data:image/svg%2bxml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTIgMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iNiIgY3k9IjYiIHI9IjUuNSIgc3Ryb2tlPSJ3aGl0ZSIvPjxlbGxpcHNlIGN4PSI2IiBjeT0iNiIgcng9IjUuNSIgcnk9IjIiIHRyYW5zZm9ybT0icm90YXRlKDkwIDYgNikiIHN0cm9rZT0id2hpdGUiLz48cGF0aCBkPSJNMSA2SDExIiBzdHJva2U9IndoaXRlIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4="/></a>

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[dmex]

Is this the same? README.md

[Abrar74774]

You mean the underlines showing? yeah same issue. I found the same thing on other repos as well, so possibly a common 'bug'.

[rich-ayr]

@dmex Confirming it's not specific to this repo: it's a GitHub-wide markdown rendering issue, so the fork and any README using this pattern will show it too.

With the <a> and <img> on separate lines, the newline+indent between them is a text node inside the anchor, so it inherits the link's text-decoration and renders as an underlined space. Collapsing each pair onto one line removes that text node. That's the minimal fix, and it keeps the newlines between anchors so the badges stay spaced.

(Markdown badge syntax avoids it for the same reason, but isn't applicable here since the centering needs the HTML wrapper.)

GitHub could fix it globally with one rule, since flex containers discard whitespace-only children:

.markdown-body a[href]:has(img) { display: inline-flex; }

See also https://github.com/orgs/community/discussions/154640