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 Leerzeichen und Steuerzeichen). Es ist eine Kurzschrift 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, Hervorhebungszeichen für Nachfahren zu ändern.

Die Größe des Hervorhebungssymbols, ähnlich wie bei Rubysymbolen, beträgt 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. Dies liegt daran, dass, wenn der Stil und die Farbe der Hervorhebungszeichen in einem Text variieren können, es äußerst unwahrscheinlich ist, dass sich deren Position ändert. In den sehr seltenen Fällen, in denen dies erforderlich ist, verwenden Sie die Eigenschaft text-emphasis-position.

Einzelne Eigenschaften

Diese Eigenschaft ist eine Kurzschrift 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: "25円B2";
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 ausgefüllt. Wenn weder filled noch open vorhanden ist, ist dies der Standard.
open: Die Form ist hohl.
dot: Kleine Kreise als Zeichen anzeigen. Der ausgefüllte Punkt ist '•' (U+2022), und der offene Punkt ist '◦' (U+25E6).
circle: Große Kreise als Zeichen anzeigen. Der ausgefüllte Kreis ist '●くろまる' (U+25CF), und der offene Kreis ist '○しろまる' (U+25CB). Dies ist die Standardform in horizontalen Schreibrichtungen, wenn keine andere Form angegeben ist.
double-circle: Doppelte Kreise als Zeichen anzeigen. Der ausgefüllte Doppelkreis ist '◉' (U+25C9), und der offene Doppelkreis ist '◎にじゅうまる' (U+25CE).
triangle: Dreiecke als Zeichen anzeigen. Das ausgefüllte Dreieck ist '▲さんかく' (U+25B2), und das offene Dreieck ist '△しろさんかく' (U+25B3).
sesame: Sesamzeichen als Zeichen anzeigen. Der ausgefüllte Sesam ist '﹅' (U+FE45), und der offene Sesam ist '﹆' (U+FE46). Dies ist die Standardform in vertikalen Schreibrichtungen, wenn keine andere Form angegeben ist.
<string>: Die angegebene Zeichenfolge als Zeichen anzeigen. Autoren sollten nicht mehr als ein Zeichen in <string> angeben. Das UA kann Zeichenfolgen, die aus mehr als einem Graphem-Cluster bestehen, kürzen oder ignorieren.
<color>: Definiert die Farbe des Zeichens. Wenn keine Farbe angegeben ist, wird currentColor verwendet.

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 zeichnet eine Überschrift mit Dreiecken zur Hervorhebung jedes Zeichens.

CSS

css

h2 {
 text-emphasis: triangle #dd5555;
}

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 erlaubt, die Position der Hervorhebungszeichen zu definieren.

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden