CSS: text-decoration

Februar 2023

Stand und Ausblick in CSS Text Decoration Module Level 4 Editor's Draft, 2 September 2022
Darstellung Code
So geht underline CSS: 
.ref01 { text-decoration: underline; }
HTML: 
<span class="ref01">So geht underline</span>
kombiniert mit Farbe CSS: 
.ref01c {
  text-decoration: underline;
  text-decoration-color: rgba(255,0,0,0.7);
}
HTML: 
<span class="ref01c">kombiniert mit Farbe</span>
...und Dicke CSS: 
.ref01cd {
  text-decoration: underline;
  text-decoration-color: rgba(255,0,0,0.7);
  text-decoration-thickness: 4pt;
}
HTML: 
<span class="ref01cd">...und Dicke</span>
...und Abstand CSS: 
.ref01cda {
  text-decoration: underline;
  text-decoration-color: rgba(255,0,0,0.7);
  text-decoration-thickness: 4pt;
  text-underline-offset: 8pt;
}
HTML: 
<span class="ref01cda">...und Abstand</span>
So geht line-through CSS: 
.ref02 { text-decoration: line-through; }
HTML: 
<span class="ref02">So geht line-through</span>
So geht overline CSS: 
.ref03 { text-decoration: overline; }
HTML: 
<span class="ref03">So geht overline</span>
So geht blink CSS: 
.ref03b { text-decoration: blink; }
HTML: 
<span class="ref03b">So geht blink</span>
Für text-decoration-style ist der Wert solid vorgegeben.
So geht dotted CSS: 
.ref04 { 
  text-decoration: underline;
  text-decoration-style: dotted;
}
HTML: 
<span class="ref04">So geht dotted</span>
So geht dashed CSS: 
.ref05 { 
  text-decoration: underline;
  text-decoration-style: dashed;
}
HTML: 
<span class="ref05">So geht dashed</span>
So geht double CSS: 
.ref06 { 
  text-decoration: underline;
  text-decoration-style: double;
}
HTML: 
<span class="ref06">So geht double</span>
So geht groove CSS: 
.ref07 { 
  text-decoration: underline;
  text-decoration-style: groove;
}
HTML: 
<span class="ref07">So geht groove</span>
So geht wavy CSS: 
.ref11 { 
  text-decoration: underline;
  text-decoration-style: wavy;
}
HTML: 
<span class="ref11">So geht wavy</span>