Warum greift die CSS-Eigenschaft nicht?

[Rolf B]

Hallo Hans,

nein, die Regel wird schon angewendet. Aber es ergibt sich eben diese "Schuhkarton"-Eigenschaft, die Gunnar beschrieb. Der Notabene-Span wird korrekt nicht unterstrichen, aber die Unterstreichung des Elternelements "scheint durch", weil der span ein normales Inline-Element ist. Es braucht schon die Atomstanze („atomic inline“), damit das nicht passiert.

Ich habe mal spaßeshalber ein p gemacht mit einer 8px dicken, roten Unterstreichung und darin ein span mit einer 5px dicken, blauen Unterstreichung. Da sieht man diese Überlagerung.

Okay, kleiner Cheat: ich musste text-underline-position setzen, damit die Unterstreichungen auf einer Höhe waren. Normalerweise sind dickere Unterstreichungen weiter weg als dünne.

<p>Ein Ring, sie zu <span>knechten</span>, sie alle zu finden</p>

p {
  text-decoration: 8px #f88 underline;
  text-underline-offset: 3px;
}
p span {
  text-decoration: 5px blue underline;
}

Jedenfalls: wenn ich für den Span ein text-decoration:none angebe, dann ist einfach nichts da, was die durchscheinende Unterstreichung überlagert, und man sieht sie. Das ist in CSS so gewollt, und ich hatte keine Ahnung davon. Gezeichnet: Euer Wiki-Mitautor 😢

Rolf