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

Syntax:

selector {

     text-align-last: text-emphasis-style text-emphasis-color | initial | inherit;

}

Values:

In general, the text-emphasis property takes the following values:

  • filled; The shape is filled with solid color.
  • open; The shape is hollow.
  • dot; Displays small circles as marks.
  • circle; Displays large circles as marks.
  • triangle; Displays triangles as marks.
  • sesame; Displays sesames as marks.
  • none; Ignores property.
  • initial, inherit

The text-emphasis color values accept regular color values.

In a simple example it looks like this:

span {

        text-emphasis: open triangle #aaa;

}

In the example above, values ‘open’ and ‘triangle’ belong to the text-emphasis-style sub-property.

NOTE: All text-emphasis properties, at the moment of writing, are not being supported by major browsers unless a proprietary prefix is being used.

Example

The text-emphasis-style and text-emphasis-color properties with '-webkit-' prefix:

 

›› go to examples ››