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 March 2022.

Die text-emphasis CSS Eigenschaft wendet Hervorhebungszeichen auf Text an (außer Leerzeichen und Steuerzeichen). Es ist eine Kurzform 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 deutlich von text-decoration. Die text-decoration Eigenschaft wird nicht vererbt, und die angegebene Dekoration wird über das gesamte Element angewendet. Hingegen wird text-emphasis vererbt, was bedeutet, dass es möglich ist, die Hervorhebungszeichen für Nachfahren zu ändern.

Die Größe des Hervorhebungszeichens, ähnlich wie bei Rubysymbolen, beträgt etwa 50% der Schriftgröße, und text-emphasis kann die Zeilenhöhe beeinflussen, wenn der aktuelle Durchschuss nicht ausreichend für die Zeichen ist.

Hinweis:>text-emphasis setzt den Wert von text-emphasis-position nicht zurück. Dies liegt daran, dass es äußerst unwahrscheinlich ist, dass sich die Position ändert, auch wenn Stil und Farbe der Hervorhebungszeichen in einem Text variieren können. Wenn dies in sehr seltenen Fällen erforderlich ist, verwenden Sie die Eigenschaft text-emphasis-position.

Einzelne Eigenschaften

Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

Syntax

css

/* Initial value */
text-emphasis: none; /* No emphasis marks */

/* <string> value */
text-emphasis: "x";
text-emphasis: "点";
text-emphasis: "\25B2";
text-emphasis: "*" #555;
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 #555;

/* 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 Volltonfarbe gefüllt. Wenn weder filled noch open vorhanden sind, ist dies der Standardwert.
open: Die Form ist hohl.
dot: Zeigt kleine Kreise als Zeichen an. Der gefüllte Punkt ist '•' (U+2022), und der offene Punkt ist '◦' (U+25E6).
circle: Zeigt große Kreise als Zeichen an. 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: Zeigt doppelte Kreise als Zeichen an. Der gefüllte Doppelkreis ist '◉' (U+25C9), und der offene Doppelkreis ist '◎' (U+25CE).
triangle: Zeigt Dreiecke als Zeichen an. Das gefüllte Dreieck ist '▲' (U+25B2), und das offene Dreieck ist '△' (U+25B3).
sesame: Zeigt Sesamkörner als Zeichen an. 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>: Zeigt die angegebene Zeichenkette als Zeichen an. Autoren sollten nicht mehr als ein Zeichen in <string> angeben. Die UA kann Zeichenketten, die aus mehr als einem Graphem-Cluster bestehen, abschneiden oder ignorieren.
<color>: Definiert die Farbe des Zeichens. Wenn keine Farbe vorhanden ist, wird auf currentcolor zurückgegriffen.

Formale Definition

Anfangswert	wie die jeweiligen Kurzschreibweisen: `text-emphasis-style`: `none` `text-emphasis-color`: `currentcolor`
Anwendbar auf	alle Elemente
Vererbt	Ja
Berechneter Wert	wie die jeweiligen Kurzschreibweisen: `text-emphasis-style`: wie angegeben `text-emphasis-color`: berechnete Farbe
Animationstyp	wie die jeweiligen Kurzschreibweisen: `text-emphasis-color`: Farbe `text-emphasis-style`: diskret

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 zeigt eine Überschrift, bei der Dreiecke zur Hervorhebung jedes Zeichens verwendet werden.

CSS

css

h2 {
  text-emphasis: triangle #d55;
}

HTML

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 festzulegen.