Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

CSS-Eigenschaft: text-decoration-color, Kategorien: Farben (allgemein), Textdarstellung (allgemein), Text Decoration (CSS 3)

Farbe der Textauszeichnung

Steuert die Farbe der Linie, mit welcher Text unter- über- oder durchgestrichen ist.

CSS-Eigenschaft: text-decoration-color
KurzbeschreibungWerteStandardwertKategorieHinweis
Farbe der Textauszeichnung
  • <color>
Farbwert, der über
'color' gesetzt ist.
Allgemein:
Farben
Textdarstellung
CSS 3:
Text Decoration
Neu in CSS 3
 

Folgendes ist beim Einsatz von text-decoration-color zu beachten:

text-decoration-color bestimmt die Farbe der Linie unter, über oder durch den Text.

Damit text-decoration-color greifen kann, muss eine der CSS-Eigenschaften text-decoration (CSS 2.1) beziehungsweise text-decoration-line (CSS3) definiert sein, damit die Linie überhaupt vorhanden ist.

Obwohl text-decoration zu den Eigenschaften gehört, welche schon seit Urzeiten des Webs unterstützt werden, ist es eher erstaunlich, dass text-decoration-color mit Ausnahme vom Firefox von keinem Browser unterstützt wird. Selbst im Falle von Firefox wird die Eigenschaft auch nur mit dem Vendor-Präfix -moz- unterstützt (Stand: Januar 2018, Firefox Version 18.0).

Browserunterstützung von text-decoration-color
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS3
Version: 16
-moz-
Version: 20
n
Version: 8Version: 9Version: 10
n
Version: 4Version: 5Version: 6
n
Version: 10Version: 11Version: 12
n

Weiterführende Informationen zu text-decoration-color:



Beispiele

HTML:

<h1 id="example-1">text-decoration-color</h1>

CSS:

#example-1 {
   text-decoration: underline;
 
   -moz-text-decoration-color: red;
   -webkit-text-decoration-color: red;
   -o-text-decoration-color: red;
   -ms-text-decoration-color: red;
   text-decoration-color: red;
}
/* text-decoration muss definiert sein, damit text-decoration-color greifen kann. */
Beispiel nur für: Firefox

Beispiel Nr. 1 So sieht's aus:

text-decoration-color

 

HTML:

<h1 id="example-2">text-decoration-color</h1>

CSS:

#example-2 {
   text-decoration: overline;
 
   -moz-text-decoration-color: #00f000;
   -webkit-text-decoration-color: #00f000;
   -o-text-decoration-color: #00f000;
   -ms-text-decoration-color: #00f000;
   text-decoration-color: #00f000;
}
/* Doppelte Linie. Nur Firefox. */
Beispiel nur für: Firefox

Beispiel Nr. 2 So sieht's aus:

text-decoration-color

 

HTML:

<h1 id="example-3">text-decoration-color</h1>

CSS:

#example-3 {
   text-decoration: line-through;
 
   -moz-text-decoration-color: #ff00ff;
   -webkit-text-decoration-color: #ff00ff;
   -o-text-decoration-color: #ff00ff;
   -ms-text-decoration-color: #ff00ff;
   text-decoration-color: #ff00ff;
}
/* Gepunktete Linie. Nur Firefox. */
Beispiel nur für: Firefox

Beispiel Nr. 3 So sieht's aus:

text-decoration-color

 

HTML:

<h1 id="example-4">text-decoration-color</h1>

CSS:

#example-4 {
    color: blue;
    text-decoration: overline underline;
 
    -moz-text-decoration-style: wavy;
    -webkit-text-decoration-style: wavy;
    -o-text-decoration-style: wavy;
    -ms-text-decoration-style: wavy;
    text-decoration-style: wavy;
 
    -moz-text-decoration-color: #ff00ff;
    -webkit-text-decoration-color: #ff00ff;
    -o-text-decoration-color: #ff00ff;
    -ms-text-decoration-color: #ff00ff;
    text-decoration-color: #ff00ff;   
}
Beispiel nur für: Firefox

Beispiel Nr. 4 So sieht's aus:

text-decoration-color

 

HTML:

<h1 id="example-5">text-decoration-color</h1>

CSS:

#example-5 {
    color: darkgreen;
 
    -moz-text-decoration-line: underline;
    -webkit-text-decoration-line: underline;
    -o-text-decoration-line: underline;
    -ms-text-decoration-line: underline;
    text-decoration-line: underline;
 
    -moz-text-decoration-color: #0000ff;
    -webkit-text-decoration-color: #0000ff;
    -o-text-decoration-color: #0000ff;
    -ms-text-decoration-color: #0000ff;
    text-decoration-color: #0000ff;   
}
Beispiel nur für: Firefox

Beispiel Nr. 5 So sieht's aus:

text-decoration-color

 

HTML:

<div id="testcase-vendor">
    <h2 class="underline-red">underline-red</h2>
    <h2 class="overline-blue">overline-blue</h2>
    <h2 class="line-through-green">line-through-green</h2>
</div>

CSS:

/* Testcase Vendor-Präfixe: */
#testcase-vendor .underline-red {
   text-decoration: underline;
 
   -moz-text-decoration-color: red;
   -webkit-text-decoration-color: red;
   -o-text-decoration-color: red;
   -ms-text-decoration-color: red;
}
#testcase-vendor .overline-blue {
   text-decoration: overline;
 
   -moz-text-decoration-color: blue;
   -webkit-text-decoration-color: blue;
   -o-text-decoration-color: blue;
   -ms-text-decoration-color: blue;
}
#testcase-vendor .line-through-green {
   text-decoration: line-through;
 
   -moz-text-decoration-color: #00f000;
   -webkit-text-decoration-color: #00f000;
   -o-text-decoration-color: #00f000;
   -ms-text-decoration-color: #00f000;
}
Beispiel nur für: Firefox

Testbeispiel: Schreibweise mit
Vendor-Präfix

underline-red

overline-blue

line-through-green

 

HTML:

<div id="testcase-standard">
    <h2 class="overline-green">overline-green</h2>
    <h2 class="line-through-red">line-through-red</h2>
    <h2 class="underline-blue">underline-blue</h2>
 </div>

CSS:

/* Testcase Standardschreibweise: */
#testcase-standard .overline-green {
   text-decoration: overline;
   text-decoration-color: #00f000;
}
#testcase-standard .line-through-red {
   text-decoration: line-through;
   text-decoration-color: red;
}
#testcase-standard .underline-blue {
   text-decoration: underline;
   text-decoration-color: blue;
}

Testbeispiel: Standardschreibweise

overline-green

line-through-red

underline-blue

 

Fehler melden

Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.

Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!

Vielen Dank!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 01. 04. 2017
Render Time: 6.409 sec.

Browser-Marktanteile