Link styling targets named anchors

[donquixote]

Background: Named anchors

A "named anchor" is a deprecated feature in html that uses an anchor tag (<a>) with the "name" attribute to form a bookmark link destination. The modern replacement is to use the id attribute on another element, and drop the anchor tag.

While deprecated, named anchors can still end up in rich test, if they are copied from elsewhere. Drupal's text filters or ckeditor may remove the name attribute, but still leave an <a> tag.

Current situation: oe_theme styles

In oe_theme there is a rule that styles every <a> tag in a rich text area.

.ecl a:is([class*=ecl-u-]), .ecl a:not([class*=ecl-],[class*=wt-]), .ecl-link {
    color: #004494;
    margin: 0;
    text-decoration: underline;
}

This also hits named anchors.

Problem

Named anchors that end up in rich text are styled like real links. This happens even if the name attribute gets removed by text filters or CKEditor.

Other CSS frameworks

In bootstrap there is this CSS to undo the styling of <a> tags. https://github.com/twbs/bootstrap/blob/main/scss/_reboot.scss#L254

// And undo these styles for placeholder links/named anchors (without href).
// It would be more straightforward to just use a[href] in previous block, but that
// causes specificity issues in many other styles that are too complex to fix.
// See https://github.com/twbs/bootstrap/issues/19402

a:not([href]):not([class]) {
  &,
  &:hover {
    color: inherit;
    text-decoration: none;
  }
}

I assume the :not([class]) is to exclude links with no href that trigger some kind of javascript.