Wie erstelle ich mit CSS3 eine schwarze Unterstreichung mit rotem Text?

Unterstreichungsfarbe ändern, ohne die Textfarbe zu beeinflussen

Im bereitgestellten Codeausschnitt haben Sie einen unterstrichenen Text mithilfe von HTML-Tags erstellt. Während der Text selbst rot ist, versuchen Sie, die Unterstreichungsfarbe in Schwarz zu trennen. Lassen Sie uns eine CSS3-Lösung für diese Herausforderung erkunden.

Einführung von text-decoration-color

CSS3 führt jetzt die Eigenschaft text-decoration-color ein und löst so Ihr Dilemma. Mit dieser Eigenschaft können Sie die Farbe der Textdekoration (z. B. Unterstreichungen) manipulieren, ohne den Text selbst zu beeinflussen.

Schwarze Unterstreichung mit rotem Text erstellen

Um dies zu erreichen Für die gewünschte Ausgabe implementieren Sie die folgende CSS-Eigenschaft:

p {
  text-decoration: underline;
  -webkit-text-decoration-color: red; /* safari still uses vendor prefix */
  text-decoration-color: red;
}

Wenden Sie dieses CSS wie folgt auf ein HTML-Element an:

<p>black text with red underline in one element - no wrapper elements here!</p>

Dadurch bleibt Ihr Text rot, während die Die Unterstreichung wird schwarz gefärbt, sodass Sie den gewünschten Effekt erzielen, ohne auf zusätzliche Wrapper zurückgreifen zu müssen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS3 eine schwarze Unterstreichung mit rotem Text?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!