Warum greift die CSS-Eigenschaft nicht?

[Rolf B]

Hallo alle,

es geht mir um die Cards im Wiki. Deren Text ist zunächst ununterstrichen, aber tabbt man drauf oder hält die Maus drüber, wird der Titel unterstrichen.

Wir haben einen Sonderfall, wo ein Teil des Titels nicht unterstrichen werden soll.

Ich habe ein Onlinebeispiel bei jsFiddle, siehe problematische Seite.

Der für die Fragestellung relevante Teil ist:

<div class="card">
  <div class="title">Titel der Karte
    <span class="notabene">(ohne Unterstreichung)</span></div>
  <p class="inhalt">Inhalt der Karte</p>
  <a href="#foo">Link in der Karte</a>
</div>

Styles:

.card:has(a:hover) .title, .card:focus-within .title {
  text-decoration-line: underline;
}

.card .title .notabene {
  display: block;
  font-size: 70%;
  text-decoration-line: none !important;
}

Hovere ich über dem Link (oder tabbe hinein), wird aller Text in der Card unterstrichen. Auch der notabene-Span. Trotz expliziter und wichtiger Angabe, dass das nicht passieren soll. Das !important war ein Versuch, eigentlich sollte schon die Spezifität ausreichen.

Wieso lässt sich die Unterstreichung nicht aufheben? Fiddle mit Live-Beispiel unter problematischer Seite.

Zu beachten ist, dass wir im Wiki mit dem HTML nicht frei sind. Links müssen durch [ziel titel] markiert werden und der Titel darf nur Text sein, kein Markup.

Rolf