1. The text-decoration shorthand CSS property sets the appearance of decorative lines on text
2. It is a shorthand for
   1. text-decoration-line
   2. text-decoration-color
   3. text-decoration-style
   4. (newer) text-decoration-thickness

1. The text-decoration-line CSS property sets the kind of decoration that is used on text in an element, such as an underline or overline
2. values
   1. underline
   2. overline
   3. line-through
3. mnemonic: all have line keyword!

1. The text-decoration-color CSS property sets the color of decorations added to text by text-decoration-line

1. The text-decoration-style CSS property sets the style of the lines specified by text-decoration-line
2. The style applies to all lines that are set with text-decoration-line
3. values
   1. solid
   2. double
   3. dotted
   4. dashed
   5. wavy

1. The text-decoration-thickness CSS property sets the stroke thickness of the decoration line that is used on text in an element, such as a line-through, underline, or overline

1. Text decorations are drawn across descendant text elements
2. This means that if an element specifies a text decoration, then a child element can't remove the decoration
3. For example, in the markup <p>This text has <em>some emphasized words</em> in it</p> the style rule p { text-decoration: underline; } would cause the entire paragraph to be underlined
4. The style rule
   em { text-decoration: none; } would not cause any change; the entire paragraph would still be underlined
5. However, the rule em { text-decoration: overline; } would cause a second decoration to appear on "some emphasized words"

6. This text has some emphasized words

Hello World

p.strikethru {
    text-decoration-line: line-through;
    text-decoration-thickness: 0.4em;
    text-decoration-color: green;
    text-decoration-style: solid;
    font-size: 2em;
    background-color: lightgoldenrodyellow;
    text-align: center;
} 

Working at the Computer

Taking regular breaks

h1.ecollege {
    all: revert;
    text-decoration: overline red wavy;
}

h2.ecollege {
    all: revert;
    text-decoration-color: navy;
    text-decoration-style: double;
    text-decoration-line: underline;
} 

Notes

1. Best viewed on Firefox (but not Safari)
2. ecollege exam question