Heim >Web-Frontend >CSS-Tutorial >Wie ändere ich die Unterstreichungsfarbe, während die Textfarbe gleich bleibt?

Wie ändere ich die Unterstreichungsfarbe, während die Textfarbe gleich bleibt?

Susan Sarandon
Susan SarandonOriginal
2024-11-14 21:03:021012Durchsuche

How to Change Underline Color While Keeping Text Color the Same?

Unterstreichungsfarbe ändern: Text- und Unterstreichungstöne trennen

Um eine rote Textfarbe beizubehalten und gleichzeitig die Unterstreichungsfarbe in Schwarz zu ändern, gehen wir wie folgt vor: Entdecken Sie eine Lösung, die eine neuartige CSS3-Eigenschaft nutzt: text-decoration-color.

Mit dieser Eigenschaft können wir unterschiedliche Farben zuweisen den Text selbst und die Unterstreichungsdekoration, sodass keine zusätzlichen Wrapper-Elemente erforderlich sind. Hier ist ein aktualisierter Codeausschnitt:

p {
  text-decoration: underline;
  -webkit-text-decoration-color: red; /* Safari still uses a vendor prefix */
  text-decoration-color: red;
}
<p>Black text with red underline in one element - no wrapper elements here!</p>

Durch die Nutzung der Eigenschaft text-decoration-color können wir den gewünschten Effekt eines schwarz unterstrichenen Texts erzielen, ohne auf die rote Textfarbe zu verzichten.

Das obige ist der detaillierte Inhalt vonWie ändere ich die Unterstreichungsfarbe, während die Textfarbe gleich bleibt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn