Text Emphasis and Decoration

text-emphasis properties apply emphasis marks to text.

text-decoration propeties set the appearance of decorative lines to text.

Text Emphasis Properties

text-emphasis

Shorthand for text-emphasis-style and text-emphasis-color.

span {
  /* <text-emphasis-style> <text-emphasis-color> */
  text-emphasis: circle;
  text-emphasis: open circle;
  text-emphasis: open circle blue;
}

text-emphasis-style

Sets text emphasis style.

If open or filled is not specified, the default is filled. If the shape is not specified, the default is circle.

text-emphasis-color

Sets text emphasis color.

text-emphasis-position

Sets text emphasis position.

Specify: over or under AND right or left.

span {
  text-emphasis-position: over right;
}

Text Decoration Properties

text-decoration

Shorthand for text-decoration-line, text-decoration-style, text-decoration-color, text-decoration-thickness.

<p id="text-decoration-example">
  Hello World!
</p>

#text-decoration-example {
  text-decoration: underline solid red 2px;
}

text-decoration-line

Sets the line of text decoration (underline, overline, etc.).

text-decoration-style

Sets the style of text decoration (solid, dashed, etc.).

text-decoration-color

Sets the color of text decoration.

text-decoration-thickness

Sets the thickness of text decoration. Possible values:

• auto — let the browser decide (default)
• from-font — read the font's preferred thickness, otherwise behaves like auto
• a length — e.g. 2px

text-underline-offset

Sets the offset of text decoration line from its original position.

Specify auto or a length (e.g. 2px).

text-underline-position

Sets the position of the underline from text-decoration: underline.

Possible values (you can also put under left or under right):

• auto — let the browser decide (default)
• from-font — read the font's preferred underline position, otherwise behaves like auto
• under — puts the underline below descenders (even below auto)
• left — puts the underline to the left side of text in vertical writing
• right — puts the underline to the right side of text in vertical writing

References

• text-emphasis (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis
• text-emphasis-style (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-style
• text-emphasis-color (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-color
• text-emphasis-position (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-position
• text-decoration (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
• text-decoration-line (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line
• text-decoration-style (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style
• text-decoration-color (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color
• text-decoration-thickness (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-thickness
• text-underline-offset (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset
• text-underline-position (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-position