Difficult to click on an example link on Chrome 86 with default CSS

[erickt]

I'm finding the hitbox for getting an example on Chrome 86 to be quite tiny with the default CSS. For example, for https://tabatkins.github.io/bikeshed/#example-e79df413, it seems the hitbox is approximately 2 pixels wide. In comparison, it looks like whatwg style has this rule:

a.self-link::before {
    content: "¶";
}

You can see this in use here: https://url.spec.whatwg.org/#example-12672b6a. Would it be worthwhile adding something like that in the default CSS?

[tabatkins]

The default styles also have that rule. It turns out that what you're seeing is the effect of an overflow: hidden rule on the .example class that didn't use to be there; it's just coincidence that the self-link positioning happens to put approximately 2px of it within the example's content box while the rest gets cut off.

I'll investigate where this rule came from, it wasn't originally in the W3C stylesheet.

[tabatkins]

Welp, no, that rule's been there for 5 years, and I just never noticed. Huh.

Will fix.

[svgeesus]

I came here to report that example self-links were not working, realized it was this bug, and was able to fix it on a per-spec basis with

div.example {
	overflow: visible;
}
div.example>a.self-link::before {
    content: "¶";
}

[svgeesus]

@tabatkins By the way this is worth fixing, because otherwise people say fragile things like "there is an error in example 4" which later becomes example 6 because others were added mean time.

Making it easy to get a link to an example makes accurate reporting possible for people who don't typically use devtools to inspect specifications.