Wie kann sichergestellt werden, dass eine dicke Unterstreichung bei Zeilenumbrüchen funktioniert?

Question

Ich verwende den folgenden Code, um meinen Hyperlinks eine dickere/stilisiertere Unterstreichungsdekoration hinzuzufügen.

a { text-decoration: none;}

a:hover { color: #c0632e }

a::after { content: ""; position: absolute;
        unten: 0; links: 0; Hintergrundfarbe: #2EB0C0;
        Deckkraft: 0,15; Z-Index: -1;
    
a:hover::after { Hintergrundfarbe: #c0632e }

Es funktioniert jedoch nur, wenn ich es in eine Klasse konvertiere und es jedem Link als hinzufüge. Wenn ich versuche, es global zu implementieren, funktioniert es nicht, wenn in der Mitte des Hyperlinks ein Zeilenumbruch steht. Es funktioniert gut, wenn keine Zeilenumbrüche vorhanden sind, aber nicht, wenn Zeilenumbrüche vorhanden sind.

Gibt es eine Möglichkeit, dies zu beheben, sodass es global verwendet werden kann, ohne dass definiert werden muss?

Answer 1

最近我也遇到了同样的问题。我建议你使用border bottom而不是::after。 试试这个：

a {
    border-bottom: 1rem solid;
}

你也可以使用px来指定大小，而不是rem。如果边框颜色没有显示出来，不要忘记指定边框颜色

border-color: black;