# CSS Text Decoration Module Level 3

## W3C Candidate Recommendation, 1 January 1970

This version:
  https://www.w3.org/TR/1970/CR-css-text-decor-3-19700101/
Latest published version:
  https://www.w3.org/TR/css-text-decor-3/
Editor's Draft:
  https://drafts.csswg.org/css-text-decor-3/
Previous Versions:
  https://www.w3.org/TR/2018/CR-css-text-decor-3-20180703/
  https://www.w3.org/TR/2013/CR-css-text-decor-3-20130801/
  https://www.w3.org/TR/2013/WD-css-text-decor-3-20130103/
  https://www.w3.org/TR/2012/WD-css-text-decor-3-20121113/
Test Suite:
  http://test.csswg.org/suites/css-text-decor-3_dev/nightly-unstable/
Issue Tracking:
  Tracker
  GitHub Issues
Editors:
  Elika J. Etemad / fantasai (Invited Expert)
  Koji Ishii (Google)
Suggest an Edit for this Spec:
  GitHub Editor

Copyright © 1970 W3C® (MIT, ERCIM, Keio, Beihang). W3C liability, trademark and permissive document license rules apply.

## Abstract

This module contains the features of CSS relating to text decoration, such as underlines, text shadows, and emphasis marks.

CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, etc.

## Status of this document

This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at https://www.w3.org/TR/.

This document was produced by the CSS Working Group as a Candidate Recommendation. This document is intended to become a W3C Recommendation. This document will remain a Candidate Recommendation at least until 31 August 2019 in order to ensure the opportunity for wide review.

GitHub Issues are preferred for discussion of this specification. When filing an issue, please put the text “css-text-decor” in the title, preferably like this: “[css-text-decor] …summary of comment…”. All issues and comments are archived, and there is also a historical archive.

Publication as a Candidate Recommendation does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.

This document was produced by a group operating under the W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.

This document is governed by the 1 March 2019 W3C Process Document.

For changes since the last draft, see the Changes section.

The following features are at-risk, and may be dropped during the CR period:

- The ability to place both emphasis marks and ruby on the same base text.

“At-risk” is a W3C Process term-of-art, and does not necessarily imply that the feature is in danger of being dropped or delayed. It means that the WG believes the feature may have difficulty being interoperably implemented in a timely manner, and marking it as such allows the WG to drop the feature if necessary when transitioning to the Proposed Rec stage, without having to publish a new Candidate Rec without the feature first.

## 1. Introduction

This subsection is non-normative.

This module covers text decoration, i.e. decorating the glyphs of the text once typeset according to font and typographic rules. (See [CSS-TEXT-3] and [CSS-FONTS-3].) Such features are traditionally used not only for purely decorative purposes, but also in some cases to show emphasis, for honorifics, and to indicate editorial changes such as insertions, deletions, and misspellings.

CSS Levels 1 and 2 only defined very basic line decorations (underlines, overlines, and strike-throughs) appropriate to Western typographical traditions. Level 3 of this module adds the ability to change the color, style, position, and continuity of these decorations, and also introduces emphasis marks (traditionally used in East Asian typography), and shadows (which were proposed then deferred from Level 2).

### 1.1. Module Interactions

This module replaces and extends the text-decorating features defined in [CSS2] chapter 16.

### 1.2. Values

This specification follows the CSS property definition conventions from [CSS2]. Value types not defined in this specification are defined in CSS Values & Units [CSS-VALUES-3]. Other CSS modules may expand the definitions of these value types.

In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept the CSS-wide keywords keywords as their property value. For readability they have not been repeated explicitly.

### 1.3. Terminology

The terms character, letter, and content language as used in this specification are defined in [CSS-TEXT-3]. Other terminology and concepts used in this specification are defined in [CSS2] and [CSS-WRITING-MODES-4].

## 2. Line Decoration: Underline, Overline, and Strike-Through

The following properties describe line decorations that are added to the content of an element. When specified on or propagated to an inline box, that box becomes a decorating box for that decoration, applying the decoration to all its fragments. The decoration is then further propagated to any in-flow block-level boxes that split the inline (see CSS2.1 section 9.2.1.1). When specified on or propagated to a block container that establishes an inline formatting context, the decorations are propagated to an anonymous inline box that wraps all the in-flow inline-level children of the block container. When specified on or propagated to a ruby container, the decorations are propagated only to the ruby base. For all other box types, the decorations are propagated to all in-flow children.

Note that text decorations are not propagated to any out-of-flow descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables. They are also not propagated to inline children of inline boxes, although the decoration is applied to such boxes.

Underlines, overlines, and line-throughs are drawn only for non-replaced inline boxes, and are drawn across all text (including white space, letter spacing, and word spacing) except spacing (white space, letter spacing, and word spacing) at the beginning and end of a line. Atomic inlines, such as images and inline blocks, are not decorated. Margins, borders, and padding of the decorating box are always skipped, however the margins, border, and padding of descendant inline boxes are not.

Note that CSS 2.1 required skipping margins, borders, and padding always. In this level, by default only the margins, borders, and padding of the decorating box are skipped. In the future CSS2.1 may be updated to match this new default. Also, control over decorating leading/trailing spaces is expected in Level 4, and will be applied by default to the HTML `ins` and `del` elements.

UAs may interrupt underlines and overlines where the line would cross glyph ink and to some distance to either side of the glyph outline; this behavior is not controllable in this level, but will be further defined in Level 4. Line-throughs must remain continuous, however.

Skipping Glyph Ink

When the UA interrupts underlines or overlines at glyph boundaries, the shape of the line at that boundary should follow the shape of the glyph.

Note, this specification intentionally does not mandate a particular method for “following the shape” of the glyph so that UAs can take appropriate measures to handle aesthetic and performance considerations. For example, a UA could assume square line endings below a certain size threshold for performance reasons; or use trapezoidal endings to approximate curves, especially on thinner line decorations. In terms of aesthetic considerations, the UA might also consider what happens when the glyph boundary intersects only part of the line thickness or is slanted close to the horizontal—following the curve exactly could result in typographically-awkward wisps of underline. Whether to show the line within enclosed areas of a glyph is yet another consideration.

Hiding the portion of the underline within the bowl gives a cleaner look to the type, while the curved ends of the underline outside it suggest the continuity of the underline through the letter by hugging its outer contour.

Relatively positioning a descendant moves all text decorations applied to it along with the descendant’s text; it does not affect calculation of the decoration’s initial position on that line. The visibility property, text-shadow, filters, and other graphical transformations likewise affect text decorations as part of the text they’re drawn on, even if the decorations were specified on an ancestor box, and do not affect the calculation of their initial positions or thicknesses. (In the case of line decorations drawn over an atomic inline or across the margins/borders/padding of a non-replaced inline box, they are analogously associated with the affected atomic inline / non-replaced inline box rather than with the decorating box.)

In the following style sheet and document fragment:

    blockquote { text-decoration: underline; color: blue; }
    em { display: block; }
    cite { color: fuchsia; }

    <blockquote>
     <p>
      <span>
       Help, help!
       <em> I am under a hat! </em>

       <cite> —GwieF </cite>
      </span>
     </p>
    </blockquote>

...the underlining for the blockquote element is propagated to an anonymous inline box that surrounds the span element, causing the text "Help, help!" to be blue, with the blue underlining from the anonymous inline underneath it, the color being taken from the blockquote element. The `<em>text</em>` in the em block is also underlined, as it is in an in-flow block to which the underline is propagated. The final line of text is fuchsia, but the underline underneath it is still the blue underline from the anonymous inline element. This diagram shows the boxes involved in the example above. The rounded aqua line represents the anonymous inline element wrapping the inline contents of the paragraph element, the rounded blue line represents the span element, and the orange lines represent the blocks.

Note: Line decorations are propagated through the box tree, not through inheritance, and thus have no effect on descendants when specified on an element with display: contents.

### 2.1. Text Decoration Lines: the text-decoration-line property

Name: | text-decoration-line
Value: | none | [ underline || overline || line-through || blink ]
Initial: | none
Applies to: | all elements
Inherited: | no (but see prose, above)
Percentages: | n/a
Computed value: | specified keyword(s)
Canonical order: | per grammar
Animation type: | discrete

Specifies what line decorations, if any, are added to the element. Values have the following meanings:

none
  Neither produces nor inhibits text decoration.
underline
  Each line of text is underlined.
overline
  Each line of text has a line over it (i.e. on the opposite side from an underline).
line-through
  Each line of text has a line through the middle.
blink
  The text blinks (alternates between visible and invisible). Conforming user agents may simply not blink the text. Note that not blinking the text is one technique to satisfy checkpoint 3.3 of WAI-UAAG. This value is deprecated in favor of Animations [CSS-ANIMATIONS-1].

Note: In vertical writing modes, text-underline-position can cause the underline and overline to switch sides. This allows the position of underlines to key off of language-specific preferences automatically.

### 2.2. Text Decoration Style: the text-decoration-style property

Name: | text-decoration-style
Value: | solid | double | dotted | dashed | wavy
Initial: | solid
Applies to: | all elements
Inherited: | no
Percentages: | n/a
Computed value: | specified keyword
Canonical order: | per grammar
Animation type: | discrete

This property specifies the style of the line(s) drawn for text decoration specified on the element. Values have the same meaning as for the border-style properties [CSS-BACKGROUNDS-3]. wavy indicates a wavy line.

The style of text decorations must remain the same on all decorations originating from a given element, even if descendant boxes have different specified styles.

### 2.3. Text Decoration Color: the text-decoration-color property

Name: | text-decoration-color
Value: | <color>
Initial: | currentcolor
Applies to: | all elements
Inherited: | no
Percentages: | n/a
Computed value: | computed color
Canonical order: | per grammar
Animation type: | by computed value type

This property specifies the color of text decoration (underlines overlines, and line-throughs) set on the element with text-decoration-line.

The color of text decorations must remain the same on all decorations originating from a given element, even if descendant boxes have different specified colors.

### 2.4. Text Decoration Shorthand: the text-decoration property

Name: | text-decoration
Value: | <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>
Initial: | see individual properties
Applies to: | see individual properties
Inherited: | see individual properties
Percentages: | see individual properties
Computed value: | see individual properties
Animation type: | see individual properties
Canonical order: | per grammar

This property is a shorthand for setting text-decoration-line, text-decoration-color, and text-decoration-style in one declaration. Omitted values are set to their initial values. A text-decoration declaration that omits both the text-decoration-color and text-decoration-style values is backwards-compatible with CSS Levels 1 and 2.

The following example underlines unvisited links with a solid blue underline in CSS1 and CSS2 UAs and a navy dotted underline in CSS3 UAs.

    link {
      color: blue;
      text-decoration: underline;
      text-decoration: navy dotted underline; /* Ignored in CSS1/CSS2 UAs */
    }

Note: The shorthand purposefully omits the text-underline-position property, which is a language/writing-system–dependent setting that keys off the content, so that it can cascade and inherit independently from the (uninherited) stylistic settings of the text-decoration shorthand.

### 2.5. Text Underline Position: the text-underline-position property

Name: | text-underline-position
Value: | auto | [ under || [ left | right ] ]
Initial: | auto
Applies to: | all elements
Inherited: | yes
Percentages: | n/a
Computed value: | specified keyword(s)
Canonical order: | per grammar
Animation type: | discrete

This property sets the position of an underline specified on the element. (It does not affect underlines specified by ancestor elements.) If left or right is specified alone, auto is also implied.

The following example styles modern Chinese, Japanese, and Korean texts with the appropriate underline positions in both horizontal and vertical text:

    :root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: under right; }
    :root:lang(zh), [lang|=zh] { text-underline-position: under left; }

Values have the following meanings:

auto
  The user agent may use any algorithm to determine the underline’s position; however it must be placed at or under the alphabetic baseline.

  Note: It is suggested that the default underline position be close to the alphabetic baseline, unless that would either cross subscripted (or otherwise lowered) text or draw over glyphs from Asian scripts such as Han or Tibetan for which an alphabetic underline is too high: in such cases, shifting the underline lower or aligning to the em box edge as described for under may be more appropriate.

  A typical “alphabetic” underline is positioned just below the alphabetic baseline

under
  The underline is positioned under the element’s text content. In this case the underline usually does not cross the descenders. (This is sometimes called “accounting” underline.) This value can be combined with left or right if a particular side is preferred in vertical typographic modes.

  text-underline-position: under

  Because text-underline-position inherits, and is not reset by the text-decoration shorthand, the following example switches the document to use under underlining, which can be more appropriate for writing systems with long, complicated descenders. It is also often useful for mathematical or chemical texts that use many subscripts.

      :root { text-underline-position: under; }

  Note: The under value does not guarantee that the underline will not conflict with glyphs, as some fonts have descenders or diacritics that extend below the font’s descent metrics.

left
  In vertical typographic modes, the underline is aligned as for under, except it is always aligned to the left edge of the text. If this causes the underline to be drawn on the "over" side of the text, then an overline also switches sides and is drawn on the "under" side.
right
  In vertical typographic modes, the underline is aligned as for under, except it is always aligned to the right edge of the text. If this causes the underline to be drawn on the "over" side of the text, then an overline also switches sides and is drawn on the "under" side.

left | right

In vertical typographic modes, the text-underline-position values left and right allow placing the underline on either side of the text. (In horizontal typographic modes, both values are treated as under.)

The exact position and thickness of line decorations is UA-defined in this level. However, for underlines and overlines the UA must use a single thickness and position on each line for the decorations deriving from a single decorating box.

vs.

Correct and incorrect rendering of `<u>A<sup>B</sup><big>C</big>D</u>`

Note, since line decorations can span elements with varying font sizes and vertical alignments, the best position for a line decoration is not necessarily the ideal position dictated by the decorating box. For example, an overline positioned to a small font will effectively become a line-through if the element contains text in a significantly larger font-size. Even for underlines, if the text is not aligned to the alphabetic baseline (for example, in vertical typesetting styles, text is aligned by its central baseline by default [CSS-WRITING-MODES-4]) an underline will cut through descendant text of a larger font-size. UA consideration of descendant content will therefore result in better typography.

Due to the central baseline alignment of vertical text, a left-side underline on small vertical text will cut through the text of a child with a larger font size. The underline is not allowed to be broken, but adjusting its position further to the left properly accommodates all of the underlined text.

UAs must adjust line positions to match the shifted metrics of decorating boxes shifted with vertical-align values other than baseline [CSS2] or subscripted/superscripted via font-variant-position [CSS-FONTS-3], but must not adjust the line position or thickness in response to descendants of a decorating box that are so styled. This allows superscripts and subscripts to be properly decorated (underlined, struck through, etc.) but prevents them from distorting or breaking the positioning of such decorations on their ancestors.

Example of underline applied to superscripted text vs. underline applied to text containing a superscript

Some font formats (such as OpenType) can offer information about the appropriate position of a line decoration. The UA should use such information (such as the underline thickness, or appropriate alphabetic underline position) from the font wherever appropriate.

Note: Typically, OpenType font metrics give the position of an alphabetic underline; in some cases (especially in CJK fonts), it gives the position of a under left underline. (In this case, the font’s underline metrics typically touch the bottom edge of the em box). The UA may but is not required to correct for incorrect font metrics.

## 3. Emphasis Marks

East Asian documents traditionally use small symbols next to each glyph to emphasize a run of text. For example:

Accent emphasis (shown in blue for clarity) applied to Japanese text

The text-emphasis shorthand, and its text-emphasis-style and text-emphasis-color longhands, can be used to apply such marks to the text. The text-emphasis-position property, which inherits separately, allows setting the emphasis marks’ position with respect to the text.

### 3.1. Emphasis Mark Style: the text-emphasis-style property

Name: | text-emphasis-style
Value: | none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | <string>
Initial: | none
Applies to: | all elements
Inherited: | yes
Percentages: | n/a
Computed value: | the keyword none, a pair of keywords representing the shape and fill, or a string
Canonical order: | per grammar
Animation type: | discrete

This property applies emphasis marks to the element’s text. Values have the following meanings:

none
  No emphasis marks.
filled
  The shape is filled with solid color.
open
  The shape is hollow.
dot
  Display small circles as marks. The filled dot is U+2022 '•', and the open dot is U+25E6 '◦'.
circle
  Display large circles as marks. The filled circle is U+25CF '●', and the open circle is U+25CB '○'.
double-circle
  Display double circles as marks. The filled double-circle is U+25C9 '◉', and the open double-circle is U+25CE '◎'.
triangle
  Display triangles as marks. The filled triangle is U+25B2 '▲', and the open triangle is U+25B3 '△'.
sesame
  Display sesames as marks. The filled sesame is U+FE45 '﹅', and the open sesame is U+FE46 '﹆'.
<string>
  Display the given string as marks. Authors should not specify more than one character in <string>. The UA may truncate or ignore strings consisting of more than one grapheme cluster.

If a shape keyword is specified but neither of filled nor open is specified, filled is assumed. If only filled or open is specified, the shape keyword computes to circle in horizontal typographic modes and sesame in vertical typographic modes.

The marks should be drawn using the element’s font settings with the addition of the ruby feature and the size scaled down 50%. However, since not all fonts have all these glyphs, and some fonts use inappropriate sizes for emphasis marks in these code points, the UA may opt to use a font known to be good for emphasis marks, or the marks may instead be synthesized by the UA. Marks must remain upright in vertical typographic modes: like CJK characters, they do not rotate to match the writing mode. The orientation of marks in horizontal typographic modes of vertical writing modes is undefined in this level (but may be defined in a future level if definitive use cases arise).

Note: One example of good fonts for emphasis marks is Adobe’s open source Kenten Generic OpenType Font, which is specially designed for the emphasis marks.

The marks are drawn once for each typographic character unit. However, emphasis marks are not drawn for:

- Word separators or other characters that belong to the Unicode separator classes (Z*). (But note that emphasis marks are drawn for a space that combines with any combining characters.)
- Punctuation--specifically, any characters that belong to the Unicode P* general category and do not `NFKD` normalize [UAX15] to any of the following symbols:

  # | U+0023 | NUMBER SIGN
  % | U+0025 | PERCENT SIGN
  ‰ | U+2030 | PER MILLE SIGN
  ‱ | U+2031 | PER TEN THOUSAND SIGN
  ٪ | U+066A | ARABIC PERCENT SIGN
  ؉ | U+0609 | ARABIC-INDIC PER MILLE SIGN
  ؊ | U+060A | ARABIC-INDIC PER TEN THOUSAND SIGN
  & | U+0026 | AMPERSAND
  ⁊ | U+204A | TIRONIAN SIGN ET
  @ | U+0040 | COMMERCIAL AT
  § | U+00A7 | SECTION SIGN
  ¶ | U+00B6 | PILCROW SIGN
  ⁋ | U+204B | REVERSED PILCROW SIGN
  ⁓ | U+2053 | SWUNG DASH
  〽️ | U+303D | PART ALTERNATION MARK

- Characters belonging to the Unicode classes for control codes and unassigned characters (Cc, Cf, Cn).

Note: Control over which characters are marked will be added in Level 4. (The list of punctuation may also be further refined, particularly for non-CJK punctuation.)

### 3.2. Emphasis Mark Color: the text-emphasis-color property

Name: | text-emphasis-color
Value: | <color>
Initial: | currentcolor
Applies to: | all elements
Inherited: | yes
Percentages: | n/a
Computed value: | computed color
Canonical order: | per grammar
Animation type: | by computed value type

This property specifies the foreground color of the emphasis marks.

Note: currentcolor keyword computes to itself and is resolved to the value of color after inheritance is performed. This means text-emphasis-color by default matches the text color even as color changes across elements.

### 3.3. Emphasis Mark Shorthand: the text-emphasis property

Name: | text-emphasis
Value: | <'text-emphasis-style'> || <'text-emphasis-color'>
Initial: | see individual properties
Applies to: | see individual properties
Inherited: | see individual properties
Percentages: | see individual properties
Computed value: | see individual properties
Animation type: | see individual properties
Canonical order: | per grammar

This property is a shorthand for setting text-emphasis-style and text-emphasis-color in one declaration. Omitted values are set to their initial values.

Note that text-emphasis-position is not reset in this shorthand. This is because typically the shape and color vary, but the position is consistent for a particular language throughout the document. Therefore the position should inherit independently.

### 3.4. Emphasis Mark Position: the text-emphasis-position property

Name: | text-emphasis-position
Value: | [ over | under ] && [ right | left ]?
Initial: | over right
Applies to: | all elements
Inherited: | yes
Percentages: | n/a
Computed value: | specified keyword(s)
Canonical order: | per grammar
Animation type: | discrete

This property describes where emphasis marks are drawn at. If [ right | left ] is omitted, it defaults to right. The values have following meanings:

over
  Draw marks over the text in horizontal typographic modes.
under
  Draw marks under the text in horizontal typographic modes.
right
  Draw marks to the right of the text in vertical typographic modes.
left
  Draw marks to the left of the text in vertical typographic modes.

Emphasis marks are drawn exactly as if each character was assigned the mark as its ruby annotation text with the ruby position given by text-emphasis-position and the ruby alignment as centered. Note that this position may be adjusted if it would conflict with underline or overline decorations.

The effect of emphasis marks on the line height is the same as for ruby text.

Note, the preferred position of emphasis marks depends on the language. In Japanese for example, the preferred position is over right. In Chinese, on the other hand, the preferred position is under right. The informative table below summarizes the preferred emphasis mark positions for Chinese and Japanese:

Preferred emphasis mark and ruby position
Language | Preferred position | Illustration
--- | --- | ---
Horizontal | Vertical
Japanese | over | right |  |
Korean
Mongolian
Chinese | under | right |

If emphasis marks are applied to characters for which ruby is drawn in the same position as the emphasis mark, the emphasis marks are placed outside the ruby. This includes auto-hidden and empty ruby annotations.

Emphasis marks applied to 4 characters, with ruby also on 2 of them

Some editors prefer to hide emphasis marks when they conflict with ruby. In HTML, this can be done with the following style rule:

    ruby { text-emphasis: none; }

Some other editors prefer to hide ruby when they conflict with emphasis marks. In HTML, this can be done with the following pattern:

    em { text-emphasis: dot; } /* Set text-emphasis for <em> elements */
    em rt { display: none; }   /* Hide ruby inside <em> elements */

## 4. Text Shadows: the text-shadow property

Name: | text-shadow
Value: | none | [ <color>? && <length>{2,3} ]#
Initial: | none
Applies to: | all elements
Inherited: | yes
Percentages: | n/a
Computed value: | either the keyword none or a list, each item consisting of three absolute lengths plus a computed color
Canonical order: | per grammar
Animation type: | by computed value, treating none as a zero-item list and appending blank shadows (transparent 0 0 0) as needed to match the longer list if the the shorter list is otherwise compatible with the longer one

This property accepts a comma-separated list of shadow effects to be applied to the text of the element. Values are interpreted as for box-shadow [CSS-BACKGROUNDS-3]. (But note that spread values and the inset keyword are not allowed.) Each layer shadows the element’s text and all its text decorations (composited together). If the color of the shadow is not specified, it defaults to currentColor, i.e. the shadow’s color is taken from the element’s color property.

The shadow effects are applied front-to-back: the first shadow is on top. The shadows may thus overlay each other, but they never overlay the text itself. The shadow must be painted at a stack level between the element’s border and/or background (if present) and the elements text and text decoration. UAs should avoid painting text shadows over text in adjacent elements belonging to the same stack level and stacking context. (This may mean that the exact stack level of the shadows depends on whether the element has a border or background: the exact stacking behavior of text shadows is thus UA-defined.) It is undefined whether a given shadow layer shadows each glyph or decoration independently or if the text and/or decorations are flattened and then shadowed.

Unlike box-shadow, text shadows are not clipped to the shadowed shape and may show through if the text is partially-transparent. Like box-shadow, text shadows do not influence layout, and do not trigger scrolling or increase the size of the scrollable overflow region.

Note: The painting order of shadows defined here is the opposite of that defined in the 1998 CSS2 Recommendation.

The text-shadow property applies to both the `::first-line` and `::first-letter` pseudo-elements.

## 5. Painting Text Decorations

### 5.1. Painting Order of Text Decorations

As in [CSS2], text decorations are drawn immediately over/under the text they decorate, in the following order (bottommost first):

- shadows (text-shadow)
- underlines (text-decoration)
- overlines (text-decoration)
- text
- emphasis marks (text-emphasis)
- line-through (text-decoration)

Where line decorations are drawn across box decorations or atomic inlines, they are drawn over non-positioned content and just below any positioned descendants (immediately below layer #8 in CSS2.1 Appendix E).

### 5.2. Overflow of Text Decorations

Text decorations that leak outside a box are considered ink overflow: they do not extend the scrollable overflow region. [css-overflow-3]

## Appendix A: Acknowledgements

This specification would not have been possible without the help from: Ayman Aldahleh, Bert Bos, Tantek Çelik, Stephen Deach, John Daggett, Martin Dürst, Laurie Anna Edlund, Ben Errez, Yaniv Feinberg, Arye Gittelman, Ian Hickson, Martin Heijdra, Richard Ishida, Masayasu Ishikawa, Michael Jochimsen, Eric LeVine, Ambrose Li, Håkon Wium Lie, Chris Lilley, Ken Lunde, Nat McCully, Shinyu Murakami, Paul Nelson, Chris Pratley, Marcin Sawicki, Arnold Schrijver, Rahul Sonnad, Michel Suignard, Takao Suzuki, Frank Tang, Chris Thrasher, Etan Wexler, Chris Wilson, Masafumi Yabe and Steve Zilles.

## Appendix B: Default UA Stylesheet

This appendix is informative, and is to help UA developers to implement default stylesheet, but UA developers are free to ignore or change.

    /* typical styling of HTML */
    blink {
      text-decoration-line: blink;
    }
    s, strike, del {
      text-decoration: line-through;
    }
    u, ins, :link, :visited {
      text-decoration: underline;
    }
    abbr[title], acronym[title] {
      text-decoration: dotted underline;
    }

    /* disable inheritance of text-emphasis marks to ruby text:
      emphasis marks should only apply to base text */
    rt { text-emphasis: none; }

    /* set language-appropriate default emphasis mark position */
    :root:lang(zh), [lang|=zh] { text-emphasis-position: under right; }
    [lang|=ja], [lang|=ko]     { text-emphasis-position: over right; }

    /* set language-appropriate default underline position */
    :root:lang(ja), [lang|=ja],
    :root:lang(mn), [lang|=mn],
    :root:lang(ko), [lang|=ko] { text-underline-position: right; }
    :root:lang(zh), [lang|=zh] { text-underline-position: left;  }
    /* auto is chosen (implied) above instead of under
       due to content-compatibility concerns */

If you find any issues, recommendations to add, or corrections, please send the information to www-style@w3.org with `[css-text-decor]` in the subject line.

While text-decoration-line: blink can’t be fully reproduced with other existing properties, authors can achieve a very similar effect with the following CSS:

    @keyframes blink {
      0% {
        visibility: hidden;
        animation-timing-function: step-end;
      }
      25%, 100% {
        visibility: visible;
      }
    }
    blink {
      animation: blink 1s infinite;
    }

## Appendix C: Changes

### Changes since the July 2018 Candidate Recommendation

Changes include:

- Clarified that text decoration overflow is ink overflow. (Issue 3272)
- Fixed inconsistencies in sample text-underline-position rules. (Issue 3441)
- Cleaned up “Computed value” lines to match new conventions.

A Disposition of Comments is available.

### Changes since the August 2013 Candidate Recommendation

Significant changes include:

- Deferred text-decoration-skip to Level 4 to allow for major changes. Defined behavioral defaults in prose. (Issue 1, Issue 22, Issue 26)
- Specified that line-throughs are unaffected by ink-skipping feature. (Issue 24)
- Recommended that when ink is skipped, line endings conform to the glyph shape. (Issue 30)
- Updated writing-mode–sensitive conditions to depend on typographic mode, to account for addition of sideways-lr and sideways-rl values to writing-mode property. Marked orientation of emphasis marks under sideways-lr and sideways-rl undefined. (Issue 10, Issue 20)
- Made [ right | left ] option of text-emphasis-position optional, defaulting to right. (Issue 17)
- Made text-underline-position imply auto instead of under when only left or right is specified. (Issue 18)
- Changed text decoration to skip leading and trailing spaces. (Issue 6)
- Noted that the positions of ruby annotations may be adjusted to avoid conflicts with text decorations. (Issue 21)
- Changed initial value of text-shadow to be `currentColor`. (Issue 28)
- Fixed error in “Computed value” line for text-shadow. (Issue 7)
- Fixed canonical order of text-shadow values to match implementations. (Issue 35)
- Defined positioning of emphasis marks with respect to auto-hidden and empty ruby annotations. (Issue 9)

  > If emphasis marks are applied to characters for which ruby is drawn in the same position as the emphasis mark, the emphasis marks are placed outside the ruby. This includes auto-hidden and empty ruby annotations.

- Made text-emphasis skip punctuation by default. (Issue 16)
- Added rule to apply ruby to emphasis marks' font. (Issue 13)
- Various corrections and improvements to the default UA rules for text-emphasis-position and text-underline-position. (Issue 11, Issue 12, Issue 18, Issue 19, Issue 36)

## Conformance

### Document conventions

Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification.

All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. [RFC2119]

Examples in this specification are introduced with the words “for example” or are set apart from the normative text with `class="example"`, like this:

This is an example of an informative example.

Informative notes begin with the word “Note” and are set apart from the normative text with `class="note"`, like this:

Note, this is an informative note.

Advisements are normative sections styled to evoke special attention and are set apart from other normative text with `<strong class="advisement">`, like this: UAs MUST provide an accessible alternative.

### Conformance classes

Conformance to this specification is defined for three conformance classes:

style sheet
  A CSS style sheet.
renderer
  A UA that interprets the semantics of a style sheet and renders documents that use them.
authoring tool
  A UA that writes a style sheet.

A style sheet is conformant to this specification if all of its statements that use syntax defined in this module are valid according to the generic CSS grammar and the individual grammars of each feature defined in this module.

A renderer is conformant to this specification if, in addition to interpreting the style sheet as defined by the appropriate specifications, it supports all the features defined by this specification by parsing them correctly and rendering the document accordingly. However, the inability of a UA to correctly render a document due to limitations of the device does not make the UA non-conformant. (For example, a UA is not required to render color on a monochrome monitor.)

An authoring tool is conformant to this specification if it writes style sheets that are syntactically correct according to the generic CSS grammar and the individual grammars of each feature in this module, and meet all other conformance requirements of style sheets as described in this module.

### Requirements for Responsible Implementation of CSS

The following sections define several conformance requirements for implementing CSS responsibly, in a way that promotes interoperability in the present and future.

#### Partial Implementations

So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must treat as invalid (and ignore as appropriate) any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support. In particular, user agents must not selectively ignore unsupported property values and honor supported values in a single multi-value property declaration: if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored.

#### Implementations of Unstable and Proprietary Features

To avoid clashes with future stable CSS features, the CSSWG recommends following best practices for the implementation of unstable features and proprietary extensions to CSS.

#### Implementations of CR-level Features

Once a specification reaches the Candidate Recommendation stage, implementers should release an unprefixed implementation of any CR-level feature they can demonstrate to be correctly implemented according to spec, and should avoid exposing a prefixed variant of that feature.

To establish and maintain the interoperability of CSS across implementations, the CSS Working Group requests that non-experimental CSS renderers submit an implementation report (and, if necessary, the testcases used for that implementation report) to the W3C before releasing an unprefixed implementation of any CSS features. Testcases submitted to W3C are subject to review and correction by the CSS Working Group.

Further information on submitting testcases and implementation reports can be found from on the CSS Working Group’s website at http://www.w3.org/Style/CSS/Test/. Questions should be directed to the public-css-testsuite@w3.org mailing list.

### CR exit criteria

For this specification to be advanced to Proposed Recommendation, there must be at least two independent, interoperable implementations of each feature. Each feature may be implemented by a different set of products, there is no requirement that all features be implemented by a single product. For the purposes of this criterion, we define the following terms:

independent
  each implementation must be developed by a different party and cannot share, reuse, or derive from code used by another qualifying implementation. Sections of code that have no bearing on the implementation of this specification are exempt from this requirement.
interoperable
  passing the respective test case(s) in the official CSS test suite, or, if the implementation is not a Web browser, an equivalent test. Every relevant test in the test suite should have an equivalent test created if such a user agent (UA) is to be used to claim interoperability. In addition if such a UA is to be used to claim interoperability, then there must one or more additional UAs which can also pass those equivalent tests in the same way for the purpose of interoperability. The equivalent tests must be made publicly available for the purposes of peer review.
implementation
  a user agent which:
  1. implements the specification.
  2. is available to the general public. The implementation may be a shipping product or other publicly available version (i.e., beta version, preview release, or "nightly build"). Non-shipping product releases must have implemented the feature(s) for a period of at least one month in order to demonstrate stability.
  3. is not experimental (i.e., a version specifically designed to pass the test suite and is not intended for normal usage going forward).

The specification will remain Candidate Recommendation for at least six months.

## Index

### Terms defined by this specification

- auto, in §2.5
- blink, in §2.1
- character, in §1.3
- circle, in §3.1
- content language, in §1.3
- decorating box, in §2
- dot, in §3.1
- double-circle, in §3.1
- filled, in §3.1
- left
  - value for text-emphasis-position, in §3.4
  - value for text-underline-position, in §2.5
- letter, in §1.3
- line-through, in §2.1
- none
  - value for text-decoration-line, in §2.1
  - value for text-emphasis-style, in §3.1
- open, in §3.1
- over, in §3.4
- overline, in §2.1
- right
  - value for text-emphasis-position, in §3.4
  - value for text-underline-position, in §2.5
- sesame, in §3.1
- <string>, in §3.1
- text-decoration, in §2.4
- text-decoration-color, in §2.3
- text-decoration-line, in §2.1
- text-decoration-style, in §2.2
- text-emphasis, in §3.3
- text-emphasis-color, in §3.2
- text-emphasis-position, in §3.4
- text-emphasis-style, in §3.1
- text-shadow, in §4
- text-underline-position, in §2.5
- triangle, in §3.1
- under
  - value for text-emphasis-position, in §3.4
  - value for text-underline-position, in §2.5
- underline, in §2.1

https://www.w3.org/TR/css3-background/#propdef-box-shadow Referenced in:

- 4. Text Shadows: the text-shadow property (2) (3)

https://www.w3.org/TR/css3-background/#shadow-inset Referenced in:

- 4. Text Shadows: the text-shadow property

https://www.w3.org/TR/css3-background/#box-shadow-none Referenced in:

- 4. Text Shadows: the text-shadow property (2)

https://www.w3.org/TR/css3-break/#fragment Referenced in:

- 2. Line Decoration: Underline, Overline, and Strike-Through

https://www.w3.org/TR/css3-color/#valuea-def-color Referenced in:

- 2.3. Text Decoration Color: the text-decoration-color property
- 3.2. Emphasis Mark Color: the text-emphasis-color property
- 4. Text Shadows: the text-shadow property

https://www.w3.org/TR/css3-color/#color0 Referenced in:

- 3.2. Emphasis Mark Color: the text-emphasis-color property (2) (3)
- 4. Text Shadows: the text-shadow property

https://www.w3.org/TR/css-color-4/#valdef-color-currentcolor Referenced in:

- 3.2. Emphasis Mark Color: the text-emphasis-color property
- 4. Text Shadows: the text-shadow property

https://www.w3.org/TR/css-display-3/#css-anonymous Referenced in:

- 2. Line Decoration: Underline, Overline, and Strike-Through

https://www.w3.org/TR/css-display-3/#atomic-inline Referenced in:

- 2. Line Decoration: Underline, Overline, and Strike-Through

https://www.w3.org/TR/css-display-3/#block-container Referenced in:

- 2. Line Decoration: Underline, Overline, and Strike-Through (2)

https://www.w3.org/TR/css-display-3/#block-level Referenced in:

- 2. Line Decoration: Underline, Overline, and Strike-Through

https://www.w3.org/TR/css-display-3/#css-box Referenced in:

- 2. Line Decoration: Underline, Overline, and Strike-Through
- 5.2. Overflow of Text Decorations

https://www.w3.org/TR/css-display-3/#propdef-display Referenced in:

- 2. Line Decoration: Underline, Overline, and Strike-Through

https://www.w3.org/TR/css-display-3/#in-flow Referenced in:

- 2. Line Decoration: Underline, Overline, and Strike-Through (2)

https://www.w3.org/TR/css-display-3/#inline-box Referenced in:

- 2. Line Decoration: Underline, Overline, and Strike-Through (2) (3)

https://www.w3.org/TR/css-display-3/#inline-formatting-context Referenced in:

- 2. Line Decoration: Underline, Overline, and Strike-Through

https://www.w3.org/TR/css-display-3/#inline-level Referenced in:

- 2. Line Decoration: Underline, Overline, and Strike-Through

https://www.w3.org/TR/css-display-3/#non-replaced Referenced in:

- 2. Line Decoration: Underline, Overline, and Strike-Through

https://www.w3.org/TR/css-fonts-3/#propdef-font-variant-position Referenced in:

- 2.5. Text Underline Position: the text-underline-position property

https://drafts.csswg.org/css-fonts-4/#valdef-font-variant-east-asian-ruby Referenced in:

- 3.1. Emphasis Mark Style: the text-emphasis-style property
- Changes since the August 2013 Candidate Recommendation

https://www.w3.org/TR/css-inline-3/#propdef-vertical-align Referenced in:

- 2.5. Text Underline Position: the text-underline-position property

https://www.w3.org/TR/css-overflow-3/#ink-overflow Referenced in:

- 5.2. Overflow of Text Decorations
- Changes since the July 2018 Candidate Recommendation

https://www.w3.org/TR/css-overflow-3/#scrollable-overflow-region Referenced in:

- 4. Text Shadows: the text-shadow property
- 5.2. Overflow of Text Decorations

https://drafts.csswg.org/css-ruby-1/#ruby-annotation-box Referenced in:

- 3.4. Emphasis Mark Position: the text-emphasis-position property
- Changes since the August 2013 Candidate Recommendation

https://drafts.csswg.org/css-ruby-1/#ruby-base-box Referenced in:

- 2. Line Decoration: Underline, Overline, and Strike-Through

https://drafts.csswg.org/css-ruby-1/#ruby-container Referenced in:

- 2. Line Decoration: Underline, Overline, and Strike-Through

https://www.w3.org/TR/css-text-3/#unicode-general-category Referenced in:

- 3.1. Emphasis Mark Style: the text-emphasis-style property

https://www.w3.org/TR/css-text-3/#typographic-character-unit Referenced in:

- 3.1. Emphasis Mark Style: the text-emphasis-style property

https://www.w3.org/TR/css3-values/#length-value Referenced in:

- 4. Text Shadows: the text-shadow property

https://www.w3.org/TR/css3-values/#string-value Referenced in:

- 3.1. Emphasis Mark Style: the text-emphasis-style property (2)

https://www.w3.org/TR/css-values-4/#mult-comma Referenced in:

- 4. Text Shadows: the text-shadow property

https://www.w3.org/TR/css-values-4/#comb-all Referenced in:

- 3.4. Emphasis Mark Position: the text-emphasis-position property
- 4. Text Shadows: the text-shadow property

https://www.w3.org/TR/css-values-4/#mult-opt Referenced in:

- 3.4. Emphasis Mark Position: the text-emphasis-position property
- 4. Text Shadows: the text-shadow property

https://www.w3.org/TR/css-values-4/#css-wide-keywords Referenced in:

- 1.2. Values

https://www.w3.org/TR/css-values-4/#mult-num-range Referenced in:

- 4. Text Shadows: the text-shadow property

https://www.w3.org/TR/css-values-4/#comb-one Referenced in:

- 2.1. Text Decoration Lines: the text-decoration-line property
- 2.2. Text Decoration Style: the text-decoration-style property (2) (3) (4)
- 2.5. Text Underline Position: the text-underline-position property (2)
- 3.1. Emphasis Mark Style: the text-emphasis-style property (2) (3) (4) (5) (6) (7)
- 3.4. Emphasis Mark Position: the text-emphasis-position property (2)
- 4. Text Shadows: the text-shadow property

https://www.w3.org/TR/css-values-4/#comb-any Referenced in:

- 2.1. Text Decoration Lines: the text-decoration-line property (2) (3)
- 2.4. Text Decoration Shorthand: the text-decoration property (2)
- 2.5. Text Underline Position: the text-underline-position property
- 3.1. Emphasis Mark Style: the text-emphasis-style property
- 3.3. Emphasis Mark Shorthand: the text-emphasis property

https://www.w3.org/TR/css-writing-modes-4/#valdef-writing-mode-sideways-lr Referenced in:

- Changes since the August 2013 Candidate Recommendation (2)

https://www.w3.org/TR/css-writing-modes-4/#valdef-writing-mode-sideways-rl Referenced in:

- Changes since the August 2013 Candidate Recommendation (2)

https://www.w3.org/TR/css-writing-modes-4/#typographic-mode Referenced in:

- 2.5. Text Underline Position: the text-underline-position property (2) (3) (4) (5)
- 3.1. Emphasis Mark Style: the text-emphasis-style property (2) (3) (4)
- 3.4. Emphasis Mark Position: the text-emphasis-position property (2) (3) (4)
- Changes since the August 2013 Candidate Recommendation

https://www.w3.org/TR/css-writing-modes-4/#under Referenced in:

- 2.5. Text Underline Position: the text-underline-position property

https://www.w3.org/TR/css-writing-modes-4/#vertical-writing-mode Referenced in:

- 2.1. Text Decoration Lines: the text-decoration-line property

https://www.w3.org/TR/css-writing-modes-4/#writing-mode Referenced in:

- 3.1. Emphasis Mark Style: the text-emphasis-style property

https://www.w3.org/TR/css-writing-modes-4/#propdef-writing-mode Referenced in:

- Changes since the August 2013 Candidate Recommendation

https://www.w3.org/TR/CSS21/visufx.html#propdef-visibility Referenced in:

- 2. Line Decoration: Underline, Overline, and Strike-Through

https://html.spec.whatwg.org/multipage/edits.html#the-del-element Referenced in:

- 2. Line Decoration: Underline, Overline, and Strike-Through

https://html.spec.whatwg.org/multipage/edits.html#the-ins-element Referenced in:

- 2. Line Decoration: Underline, Overline, and Strike-Through

### Terms defined by reference

- [CSS-BACKGROUNDS-3] defines the following terms:
  - box-shadow
  - inset
  - none
- [css-break-3] defines the following terms:
  - fragment
- [css-color-3] defines the following terms:
  - <color>
  - color
- [css-color-4] defines the following terms:
  - currentcolor
- [css-display-3] defines the following terms:
  - anonymous
  - atomic inline
  - block container
  - block-level
  - box
  - display
  - in-flow
  - inline box
  - inline formatting context
  - inline-level
  - non-replaced
- [CSS-FONTS-3] defines the following terms:
  - font-variant-position
- [css-fonts-4] defines the following terms:
  - ruby
- [css-inline-3] defines the following terms:
  - vertical-align
- [css-overflow-3] defines the following terms:
  - ink overflow
  - scrollable overflow region
- [css-ruby-1] defines the following terms:
  - ruby annotation
  - ruby base
  - ruby container
- [CSS-TEXT-3] defines the following terms:
  - general category
  - typographic character unit
- [CSS-VALUES-3] defines the following terms:
  - <length>
  - <string>
- [css-values-4] defines the following terms:
  - #
  - &&
  - ?
  - css-wide keywords
  - {a,b}
  - |
  - ||
- [CSS-WRITING-MODES-4] defines the following terms:
  - sideways-lr
  - sideways-rl
  - typographic mode
  - under
  - vertical writing mode
  - writing mode
  - writing-mode
- [CSS2] defines the following terms:
  - visibility
- [HTML] defines the following terms:
  - del
  - ins

## References

### Normative References

[CSS-BACKGROUNDS-3]
  Bert Bos; Elika Etemad; Brad Kemper. CSS Backgrounds and Borders Module Level 3. 17 October 2017. CR. URL: https://www.w3.org/TR/css-backgrounds-3/
[CSS-BREAK-3]
  Rossen Atanassov; Elika Etemad. CSS Fragmentation Module Level 3. 4 December 2018. CR. URL: https://www.w3.org/TR/css-break-3/
[CSS-COLOR-3]
  Tantek Çelik; Chris Lilley; David Baron. CSS Color Module Level 3. 19 June 2018. REC. URL: https://www.w3.org/TR/css-color-3/
[CSS-COLOR-4]
  Tab Atkins Jr.; Chris Lilley. CSS Color Module Level 4. 5 March 2019. WD. URL: https://www.w3.org/TR/css-color-4/
[CSS-DISPLAY-3]
  Tab Atkins Jr.; Elika Etemad. CSS Display Module Level 3. 28 August 2018. CR. URL: https://www.w3.org/TR/css-display-3/
[CSS-FONTS-3]
  John Daggett; Myles Maxfield; Chris Lilley. CSS Fonts Module Level 3. 20 September 2018. REC. URL: https://www.w3.org/TR/css-fonts-3/
[CSS-FONTS-4]
  John Daggett; Myles Maxfield; Chris Lilley. CSS Fonts Module Level 4. 20 September 2018. WD. URL: https://www.w3.org/TR/css-fonts-4/
[CSS-INLINE-3]
  Dave Cramer; Elika Etemad; Steve Zilles. CSS Inline Layout Module Level 3. 8 August 2018. WD. URL: https://www.w3.org/TR/css-inline-3/
[CSS-OVERFLOW-3]
  David Baron; Elika Etemad; Florian Rivoal. CSS Overflow Module Level 3. 31 July 2018. WD. URL: https://www.w3.org/TR/css-overflow-3/
[CSS-RUBY-1]
  Elika Etemad; Koji Ishii. CSS Ruby Layout Module Level 1. 5 August 2014. WD. URL: https://www.w3.org/TR/css-ruby-1/
[CSS-TEXT-3]
  Elika Etemad; Koji Ishii; Florian Rivoal. CSS Text Module Level 3. 12 December 2018. WD. URL: https://www.w3.org/TR/css-text-3/
[CSS-VALUES-3]
  Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 3. 31 January 2019. CR. URL: https://www.w3.org/TR/css-values-3/
[CSS-VALUES-4]
  Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 4. 31 January 2019. WD. URL: https://www.w3.org/TR/css-values-4/
[CSS-WRITING-MODES-4]
  Elika Etemad; Koji Ishii. CSS Writing Modes Level 4. 24 May 2018. CR. URL: https://www.w3.org/TR/css-writing-modes-4/
[CSS2]
  Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 7 June 2011. REC. URL: https://www.w3.org/TR/CSS2/
[RFC2119]
  S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. March 1997. Best Current Practice. URL: https://tools.ietf.org/html/rfc2119
[UAX15]
  Ken Whistler. Unicode Normalization Forms. 4 February 2019. Unicode Standard Annex #15. URL: https://www.unicode.org/reports/tr15/tr15-48.html

### Informative References

[CSS-ANIMATIONS-1]
  Dean Jackson; et al. CSS Animations Level 1. 11 October 2018. WD. URL: https://www.w3.org/TR/css-animations-1/
[HTML]
  Anne van Kesteren; et al. HTML Standard. Living Standard. URL: https://html.spec.whatwg.org/multipage/

## Property Index

Name | Value | Initial | Applies to | Inh. | %ages | Animation type | Canonical order | Computed value
--- | --- | --- | --- | --- | --- | --- | --- | ---
text-decoration | <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> | see individual properties | see individual properties | see individual properties | see individual properties | see individual properties | per grammar | see individual properties
text-decoration-color | <color> | currentcolor | all elements | no | n/a | by computed value type | per grammar | computed color
text-decoration-line | none | [ underline || overline || line-through || blink ] | none | all elements | no (but see prose, above) | n/a | discrete | per grammar | specified keyword(s)
text-decoration-style | solid | double | dotted | dashed | wavy | solid | all elements | no | n/a | discrete | per grammar | specified keyword
text-emphasis | <'text-emphasis-style'> || <'text-emphasis-color'> | see individual properties | see individual properties | see individual properties | see individual properties | see individual properties | per grammar | see individual properties
text-emphasis-color | <color> | currentcolor | all elements | yes | n/a | by computed value type | per grammar | computed color
text-emphasis-position | [ over | under ] && [ right | left ]? | over right | all elements | yes | n/a | discrete | per grammar | specified keyword(s)
text-emphasis-style | none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | <string> | none | all elements | yes | n/a | discrete | per grammar | the keyword none, a pair of keywords representing the shape and fill, or a string
text-shadow | none | [ <color>? && <length>{2,3} ]# | none | all elements | yes | n/a | by computed value, treating none as a zero-item list and appending blank shadows (transparent 0 0 0) as needed to match the longer list if the the shorter list is otherwise compatible with the longer one | per grammar | either the keyword none or a list, each item consisting of three absolute lengths plus a computed color
text-underline-position | auto | [ under || [ left | right ] ] | auto | all elements | yes | n/a | discrete | per grammar | specified keyword(s)

## Issues Index

If you find any issues, recommendations to add, or corrections, please send the information to www-style@w3.org with `[css-text-decor]` in the subject line. ↵
#character Referenced in:

- 3.1. Emphasis Mark Style: the text-emphasis-style property (2) (3)

#decorating-box Referenced in:

- 2. Line Decoration: Underline, Overline, and Strike-Through (2) (3)
- 2.5. Text Underline Position: the text-underline-position property (2) (3) (4)

#propdef-text-decoration-line Referenced in:

- 2.1. Text Decoration Lines: the text-decoration-line property
- 2.3. Text Decoration Color: the text-decoration-color property
- 2.4. Text Decoration Shorthand: the text-decoration property (2)
- Appendix B: Default UA Stylesheet

#propdef-text-decoration-style Referenced in:

- 2.2. Text Decoration Style: the text-decoration-style property
- 2.4. Text Decoration Shorthand: the text-decoration property (2) (3)

#propdef-text-decoration-color Referenced in:

- 2.3. Text Decoration Color: the text-decoration-color property
- 2.4. Text Decoration Shorthand: the text-decoration property (2) (3)

#propdef-text-decoration Referenced in:

- 2.4. Text Decoration Shorthand: the text-decoration property (2) (3)
- 2.5. Text Underline Position: the text-underline-position property
- 5.1. Painting Order of Text Decorations (2) (3)

#propdef-text-underline-position Referenced in:

- 2.1. Text Decoration Lines: the text-decoration-line property
- 2.4. Text Decoration Shorthand: the text-decoration property
- 2.5. Text Underline Position: the text-underline-position property (2) (3) (4)
- Changes since the July 2018 Candidate Recommendation
- Changes since the August 2013 Candidate Recommendation (2)

#underline-auto Referenced in:

- 2.5. Text Underline Position: the text-underline-position property
- Changes since the August 2013 Candidate Recommendation

#underline-under Referenced in:

- 2.5. Text Underline Position: the text-underline-position property (2) (3) (4) (5)
- Changes since the August 2013 Candidate Recommendation

#underline-left Referenced in:

- 2.5. Text Underline Position: the text-underline-position property (2) (3) (4)
- Changes since the August 2013 Candidate Recommendation

#underline-right Referenced in:

- 2.5. Text Underline Position: the text-underline-position property (2) (3) (4)
- Changes since the August 2013 Candidate Recommendation

#propdef-text-emphasis-style Referenced in:

- 3. Emphasis Marks
- 3.1. Emphasis Mark Style: the text-emphasis-style property
- 3.3. Emphasis Mark Shorthand: the text-emphasis property (2)

#valdef-text-emphasis-style-none Referenced in:

- 3.1. Emphasis Mark Style: the text-emphasis-style property

#valdef-text-emphasis-style-filled Referenced in:

- 3.1. Emphasis Mark Style: the text-emphasis-style property (2) (3)

#valdef-text-text-emphasis-open Referenced in:

- 3.1. Emphasis Mark Style: the text-emphasis-style property (2)

#valdef-text-emphasis-style-circle Referenced in:

- 3.1. Emphasis Mark Style: the text-emphasis-style property

#valdef-text-emphasis-style-sesame Referenced in:

- 3.1. Emphasis Mark Style: the text-emphasis-style property

#propdef-text-emphasis-color Referenced in:

- 3. Emphasis Marks
- 3.2. Emphasis Mark Color: the text-emphasis-color property (2)
- 3.3. Emphasis Mark Shorthand: the text-emphasis property (2)

#propdef-text-emphasis Referenced in:

- 3. Emphasis Marks
- 3.3. Emphasis Mark Shorthand: the text-emphasis property
- 5.1. Painting Order of Text Decorations
- Changes since the August 2013 Candidate Recommendation

#propdef-text-emphasis-position Referenced in:

- 3. Emphasis Marks
- 3.3. Emphasis Mark Shorthand: the text-emphasis property
- 3.4. Emphasis Mark Position: the text-emphasis-position property (2)
- Changes since the August 2013 Candidate Recommendation (2)

#valdef-text-emphasis-position-right Referenced in:

- 3.4. Emphasis Mark Position: the text-emphasis-position property
- Changes since the August 2013 Candidate Recommendation

#propdef-text-shadow Referenced in:

- 2. Line Decoration: Underline, Overline, and Strike-Through
- 4. Text Shadows: the text-shadow property
- 5.1. Painting Order of Text Decorations
- Changes since the August 2013 Candidate Recommendation (2) (3)