A Peek Inside the CSS Text Decoration Specification

By Vipul Patel

Text decoration is defined as decorating the glyphs of the text once typeset according to font and typographic rules.

CSS3 provides support for text decoration. This support comes in the form of underlines, text shadows and emphasis marks.

Earlier versions of the CSS specification for text decoration provides only very basic line decorations which were appropriate to Western typographical traditions.

When the line decorations are specified on a inline box, that box becomes a decorating box which would apply the decoration to all its fragments.


Let us now look at the various CSS3 properties to support text decoration.



This property specifies what line decorations are needed to an element. Valid values are:

none – Does not produce or stop text decoration

underline – all text is underlined

overline – the text has a line over it.

line-through – Each line of text has a line through the middle

blink – the text will blink.



This property specifies color of text decoration set on an element. Acceptable value is any valid  ‘color’ value.



This property specifies the style of the line which is drawn. Valid values are: solid, double, dotted, dashed and wavy.



This is a shorthand to setting text-decoration-line, text-decoration-color and text-decoration-style.



This property specifies the part of the element that the text decoration effect will not apply to. Valid values are:

  • none – This means no part of the element is skipped.
  • objects -  This value will cause it to skip the element if it is an image or inline-block
  • spaces – This value will cause it to skip all spacing
  • ink – This value will cause it to skip over glyphs.

Other values are “edges”  and “box-decoration”.



This property specifies the position of the underline on the element. Valid values are “auto”, “under”, “left”, and “right”.



This property specifies the emphasis marks on the element’s text. Valid values are ‘none’, ‘filled’, ‘open’, ‘dot’, ‘circle’, ‘double-circle’, ‘triangle’, and ‘sesame’.



This property specifies the color of the emphasis marks on the element’s text. All valid colors are acceptable values.



This property specifies the position of the emphasis marks on the element’s text. The valid values are ‘over’, ‘under’, ‘right’, and ‘left’.



The property is used to specify shadow effect to be applied to the text of the element.


Example of text decoration

<!DOCTYPE html>


<meta charset="utf-8">



     text-emphasis-style: filled dot;





<p>We expect a dot above every single character of " sample".</p>





In this article, we learned about CSS3 text decoration module. I hope you found this information useful.


About the author

Vipul Patel is a technology geek based in Seattle. He can be reached at vipul.patel@hotmail.com. You can visit his LinkedIn profile at https://www.linkedin.com/pub/vipul-patel/6/675/508





  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date