CSS text-emphasis Property
text-emphasis: double-circle red;
text-emphasis: triangle blue;
Note: text-emphasis doesn't reset the value of text-emphasis-position. This is because if the style and the color of emphasis marks may vary in a text, it is extremely unlikely that their position will. In the very rare cases when this is needed, use the property text-emphasis-position.
The text-emphasis property is quite different from text-decoration. The text-decoration property does not inherit, and the decoration specified is applied across the whole element. However, text-emphasis does inherit, which means it is possible to change emphasis marks for descendants.
The size of the emphasis symbol, like ruby symbols, is about 50% of the size of the font, and text-emphasis may affect line height when the current leading is not enough for the marks.
The text-emphasis property is a shorthand for the following CSS properties:
The numbers in the table specify the first browser version that fully supports the property.
The following table describes the values of this property.
|This is default value. No emphasis marks.
|The shape is filled with solid color.
|The shape is hollow.
|Display small circles as marks.
|Display large circles as marks.
|Display double circles as marks.
|Display triangles as marks.
|Display sesames as marks.
|Display the given string as marks.
|Defines the color of the mark.
|Sets this property to its default value.
|If specified, the associated element takes the computed value of its parent element animation-delay property.
|Reverts the cascaded value of the property from its current value to the value the property
|Rollback styles to the ones specified in previous cascade layers.
|Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.
Default CSS Property Values