16

On my browser, the Show code snippet link for the code snippet

alert("This is some example code");

renders as follows:

"Show code snippet" with broken underline

It looks like the line and the text are in separate elements, allowing the text to be drawn above the line. Moving text-decoration: underline from the surrounding <a> tag to the <span> tag fixes the problem for me.

Removing the vertical-align: middle; from the inner <span> works just as well.

GIF animation showing the enabling and disabling of CSS properties and the effect of doing so.

The recent post formatting update didn't fix the problem.

I use Firefox 120.0.1 64-bit on Windows 10, without any extensions. The bug has also been present since (at least) Firefox 74.0.

The same issue occurs in the Firefox Android app.

In Chrome >= 80.0, it renders correctly.

9
  • 1
    That’s not a text and a line, it’s a link with an underline: text-decoration: underline;
    – bzr
    Mar 10, 2020 at 15:06
  • @AryanBeezadhur Good observation, moving this rule from <a> to <span> fixes the problem for me.
    – janw
    Mar 10, 2020 at 16:31
  • If you have a userscript manager for Firefox, then you can create a user script that will fix the problem all the time.
    – bzr
    Mar 10, 2020 at 16:38
  • 2
    Renders correctly on Edge 44.18362.449.0, looks like it's just a Firefox thing.
    – Spevacus
    Mar 10, 2020 at 16:42
  • 3
    The issue seems to be the vertical-align: middle; rule on the inner span element which moves the text slightly downwords, so it overlaps the underline. Removing that rule fixes the issue as well.
    – Tom
    Mar 10, 2020 at 17:40
  • @Aryan Well not right now, since after the bug gets shortly fixed that extension will be useless afterward. It's not really a big deal anyway, right? Jul 1, 2020 at 15:44
  • 1
    On Firefox 85.0.2, still having this problem. Here's a GIF showing the CSS changes affecting it. Why does it have a forced underline anyway? Most other links don't have underline even on hover. Let's keep it consistent for all links. The right-pointing triangle and blue color already indicative enough that the element should do something on a click.
    – ADTC
    Feb 21, 2021 at 8:43
  • 1
    Can confirm that I'm seeing this in the latest version of Firefox (101.0) in Windows 10 as well. (...And that I'm not seeing it in the latest version of Chrome (102.0.5005.61) on Mac OS Monterey.)
    – V2Blast
    Jun 9, 2022 at 0:24
  • I'm not seeing this issue occur in Firefox 122.0 on Mac OS Sonoma (14.2.1).
    – V2Blast
    Feb 6 at 17:07

1 Answer 1

5

As noted in the comments, this can be worked around by overriding the vertical-align: middle setting in the style attribute.

Thus, until this is fixed, you can use the following custom CSS rule (e.g., via the Stylus add-on):

a.snippet-show-link span {
    vertical-align: baseline !important;
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .