CSS text decoration
The CSS text decoration module defines features relating to text decoration, such as underlines, text shadows, and emphasis marks.
Reference
Properties
text-decoration
text-decoration-color
text-decoration-line
text-decoration-skip
text-decoration-skip-ink
text-decoration-style
text-decoration-thickness
text-emphasis
text-emphasis-color
text-emphasis-position
text-emphasis-style
text-shadow
text-underline-offset
text-underline-position
The specification also defines the text-decoration-skip-box
, text-decoration-skip-self
, text-decoration-skip-spaces
, text-decoration-trim
, and text-emphasis-skip
properties, which are not yet supported by any browser.
Examples
css
.under {
text-decoration: underline red;
}
.over {
text-decoration: wavy overline lime;
}
.line {
text-decoration: line-through;
}
.plain {
text-decoration: none;
}
.underover {
text-decoration: dashed underline overline;
}
.thick {
text-decoration: solid underline purple 4px;
}
.blink {
text-decoration: blink;
}
html
<p class="under">This text has a line underneath it.</p>
<p class="over">This text has a line over it.</p>
<p class="line">This text has a line going through it.</p>
<p>
This <a class="plain" href="#">link will not be underlined</a>, as links
generally are by default. Be careful when removing the text decoration on
anchors since users often depend on the underline to denote hyperlinks.
</p>
<p class="underover">This text has lines above <em>and</em> below it.</p>
<p class="thick">
This text has a really thick purple underline in supporting browsers.
</p>
<p class="blink">
This text might blink for you, depending on the browser you use.
</p>
Specifications
Specification |
---|
CSS Text Decoration Module Level 3 |
CSS Text Decoration Module Level 4 |
See also
- CSS fonts module
- CSS ruby layout module
- CSS text module
- CSS writing modes module