text-emphasis
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since März 2022.
Die text-emphasis CSS-Eigenschaft wendet Hervorhebungszeichen auf Text an (außer auf Leerzeichen und Steuerzeichen). Sie ist ein Shorthand für text-emphasis-style und text-emphasis-color.
Probieren Sie es aus
text-emphasis: none;
text-emphasis: filled red;
text-emphasis: "x";
text-emphasis: filled double-circle #ffb703;
<section id="default-example">
<p>
I'd far rather be
<span class="transition-all" id="example-element">happy than right</span>
any day.
</p>
</section>
p {
font: 1.5em sans-serif;
}
Die text-emphasis-Eigenschaft unterscheidet sich erheblich von text-decoration. Die text-decoration-Eigenschaft wird nicht vererbt, und die angegebene Dekoration wird auf das gesamte Element angewendet. text-emphasis hingegen wird vererbt, was bedeutet, dass es möglich ist, die Hervorhebungszeichen für Nachkommen zu ändern.
Die Größe des Hervorhebungssymbols beträgt, ähnlich wie bei Ruby-Symbolen, etwa 50 % der Schriftgröße, und text-emphasis kann die Zeilenhöhe beeinflussen, wenn der aktuelle Zeilenabstand nicht ausreichend für die Zeichen ist.
Hinweis:
text-emphasis setzt den Wert von text-emphasis-position nicht zurück. Das liegt daran, dass wenn Stil und Farbe der Hervorhebungszeichen in einem Text variieren können, es äußerst unwahrscheinlich ist, dass sich ihre Position ändert. In den sehr seltenen Fällen, in denen dies erforderlich ist, verwenden Sie die Eigenschaft text-emphasis-position.
Bestandteilige Eigenschaften
Diese Eigenschaft ist eine Shorthand für die folgenden CSS-Eigenschaften:
Syntax
/* Initial value */
text-emphasis: none; /* No emphasis marks */
/* <string> value */
text-emphasis: "x";
text-emphasis: "点";
text-emphasis: "\25B2";
text-emphasis: "*" #555555;
text-emphasis: "foo"; /* Should NOT use. It may be computed to or rendered as 'f' only */
/* Keywords value */
text-emphasis: filled;
text-emphasis: open;
text-emphasis: filled sesame;
text-emphasis: open sesame;
/* Keywords value combined with a color */
text-emphasis: filled sesame #555555;
/* Global values */
text-emphasis: inherit;
text-emphasis: initial;
text-emphasis: revert;
text-emphasis: revert-layer;
text-emphasis: unset;
Werte
none-
Keine Hervorhebungszeichen.
filled-
Die Form ist mit einer Vollfarbe gefüllt. Wenn weder
fillednochopenvorhanden ist, ist dies der Standardwert. open-
Die Form ist hohl.
dot-
Kleine Kreise als Zeichen anzeigen. Der gefüllte Punkt ist
'•'(U+2022), und der offene Punkt ist'◦'(U+25E6). circle-
Große Kreise als Zeichen anzeigen. Der gefüllte Kreis ist
'●'(U+25CF), und der offene Kreis ist'○'(U+25CB). Dies ist die Standardform in horizontalen Schreibmodi, wenn keine andere Form angegeben ist. double-circle-
Doppelte Kreise als Zeichen anzeigen. Der gefüllte Doppelkreis ist
'◉'(U+25C9), und der offene Doppelkreis ist'◎'(U+25CE). triangle-
Dreiecke als Zeichen anzeigen. Das gefüllte Dreieck ist
'▲'(U+25B2), und das offene Dreieck ist'△'(U+25B3). sesame-
Sesamzeichen als Zeichen anzeigen. Der gefüllte Sesam ist
'﹅'(U+FE45), und der offene Sesam ist'﹆'(U+FE46). Dies ist die Standardform in vertikalen Schreibmodi, wenn keine andere Form angegeben ist. <string>-
Den angegebenen String als Zeichen anzeigen. Autoren sollten nicht mehr als ein Zeichen in
<string>angeben. Der UA kann Strings mit mehr als einem Graphemverband kürzen oder ignorieren. <color>-
Definiert die Farbe des Zeichens. Wenn keine Farbe vorhanden ist, wird standardmäßig
currentColorverwendet.
Formale Definition
| Anfangswert | wie die jeweiligen Kurzschreibweisen:
|
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Ja |
| Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
| Animationstyp | wie die jeweiligen Kurzschreibweisen:
|
Formale Syntax
text-emphasis =
<'text-emphasis-style'> ||
<'text-emphasis-color'>
<text-emphasis-style> =
none |
[ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] |
<string>
<text-emphasis-color> =
<color>
Beispiele
Eine Überschrift mit Hervorhebungsform und -farbe
Dieses Beispiel zeichnet eine Überschrift mit Dreiecken zur Hervorhebung jedes Zeichens.
CSS
h2 {
text-emphasis: triangle #dd5555;
}
HTML
<h2>This is important!</h2>
Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Text Decoration Module Level 3 # text-emphasis-property |
Browser-Kompatibilität
Siehe auch
- Die Langform-Eigenschaften
text-emphasis-style,text-emphasis-color. - Die
text-emphasis-position-Eigenschaft, die es ermöglicht, die Position der Hervorhebungszeichen zu definieren.