🐛 fix: prevent background overflow on link hover

[welpo]

Summary

This PR addresses a UI bug where additional space was highlighted when hovering over a hyperlink that starts at a newline or crosses a newline boundary.

The issue was fixed by adding a max-width to the ::before pseudo-element for links. I'm not sure why this works, but it does.

Related issue

Fixes #225 and #184.

Changes

The max-width property has been added to the ::before pseudo-element for anchor tags to ensure proper rendering of the hover effect across Webkit and Chromium-based browsers.

Additionally, I simplified the CSS. But the bugfix is just the max-width.

With this change, on Chromium and WebKit browsers, multi-line links render as though the ::before element were absent.

Firefox rendering remains identical.

Accessibility

No changes.

Screenshots

Before:

After:

Type of change

• Bug fix (fixes an issue without altering functionality)
• New feature (adds non-breaking functionality)
• Breaking change (alters existing functionality)
• UI/UX improvement (enhances user interface without altering functionality)
• Refactor (improves code quality without altering functionality)
• Documentation update
• Other (please describe below)

---

Checklist

• I have verified the accessibility of my changes
• I have tested all possible scenarios for this change
• I have updated theme.toml with a sane default for the feature
• I have made corresponding changes to the documentation:
  • Updated config.toml comments
  • Updated theme.toml comments
  • Updated "Mastering tabi" post in English
  • (Optional) Updated "Mastering tabi" post in Spanish
  • (Optional) Updated "Mastering tabi" post in Catalan