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.

| LIVE PREVIEW

text-emphasis-style	Character	Preview
`none`	—	Lorem ipsum
`filled dot`	•	Lorem ipsum
`open dot`	◦	Lorem ipsum
`filled circle`	●	Lorem ipsum
`open circle`	○	Lorem ipsum
`filled double-circle`	◉	Lorem ipsum
`open double-circle`	◎	Lorem ipsum
`filled triangle`	▲	Lorem ipsum
`open triangle`	△	Lorem ipsum
`filled sesame`	﹅	Lorem ipsum
`open sesame`	﹆	Lorem ipsum
string, e.g. `'x'`	x	Lorem ipsum

`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;
}

| LIVE PREVIEW

Hello World!

`text-decoration-line`

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

| LIVE PREVIEW

text-decoration-line	Preview
`none`	Lorem ipsum
`underline`	Lorem ipsum
`overline`	Lorem ipsum
`line-through`	Lorem ipsum

`text-decoration-style`

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

| LIVE PREVIEW

text-decoration-style	Preview
`solid`	Lorem ipsum
`double`	Lorem ipsum
`dotted`	Lorem ipsum
`dashed`	Lorem ipsum
`wavy`	Lorem ipsum

`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