CSS text-emphasis Property

❮ Previous Reference Next ❯

Example

.example1 {
  text-emphasis: filled;
}

.example2 {
  text-emphasis: open;
}

.example3 {
  text-emphasis: double-circle red;
}

.example4 {
  text-emphasis: triangle blue;
}
Try this code ❯





Hello World!

Meaning

The text-emphasis property applies emphasis marks to text (except spaces and control characters). It is a shorthand for text-emphasis-style and text-emphasis-color.

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:

Default value:none
Inherited:No
Animatable:No
Version:CSS3
JavaScript syntax:
object.style.textEmphasis="none|filled|open|dot|circle|double-circle|triangle|sesame|string|color|initial|inherit|revert|revert-layer|unset";


Standard Syntax

text-emphasis: none|filled|open|dot|circle|double-circle|triangle|sesame|string|color|initial|inherit|revert|revert-layer|unset;


Browser Support

The numbers in the table specify the first browser version that fully supports the property.



Status





Property Values

The following table describes the values of this property.

Value Description
none This is default value. No emphasis marks.
filled The shape is filled with solid color.
open The shape is hollow.
dot Display small circles as marks.
circle Display large circles as marks.
double-circle Display double circles as marks.
triangle Display triangles as marks.
sesame Display sesames as marks.
string Display the given string as marks.
color Defines the color of the mark.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset 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

selectors {
  text-emphasis: none;
}
❮ Previous Reference Next ❯