`text-emphasis-style` CSS property

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2022 browserübergreifend verfügbar.

Die text-emphasis-style-CSS-Eigenschaft legt das Aussehen von Betonungsmarkierungen fest. Sie kann auch mit dem text-emphasis-Shorthand gesetzt und zurückgesetzt werden.

Probieren Sie es aus

text-emphasis-style: none;

text-emphasis-style: triangle;

text-emphasis-style: "x";

text-emphasis-style: filled double-circle;

<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;
}

Syntax

css

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

/* <string> values */
text-emphasis-style: "x";
text-emphasis-style: "\25B2";
text-emphasis-style: "*";

/* Keyword values */
text-emphasis-style: filled;
text-emphasis-style: open;
text-emphasis-style: dot;
text-emphasis-style: circle;
text-emphasis-style: double-circle;
text-emphasis-style: triangle;
text-emphasis-style: filled sesame;
text-emphasis-style: open sesame;

/* Global values */
text-emphasis-style: inherit;
text-emphasis-style: initial;
text-emphasis-style: revert;
text-emphasis-style: revert-layer;
text-emphasis-style: unset;

Werte

none: Keine Betonungsmarkierungen.
filled: Die Form ist mit einer soliden Farbe gefüllt. Wenn weder filled noch open vorhanden ist, ist dies der Standard.
open: Die Form ist hohl.
dot: Zeigt kleine Kreise als Markierungen. Der gefüllte Punkt ist '•' (U+2022), und der offene Punkt ist '◦' (U+25E6).
circle: Zeigt große Kreise als Markierungen. Der gefüllte Kreis ist '●' (U+25CF), und der offene Kreis ist '○' (U+25CB).
double-circle: Zeigt doppelte Kreise als Markierungen. Der gefüllte Doppelkegel ist '◉' (U+25C9), und der offene Doppelkegel ist '◎' (U+25CE).
triangle: Zeigt Dreiecke als Markierungen. Das gefüllte Dreieck ist '▲' (U+25B2), und das offene Dreieck ist '△' (U+25B3).
sesame: Zeigt Sesamkörner als Markierungen. Der gefüllte Sesam ist '﹅' (U+FE45), und der offene Sesam ist '﹆' (U+FE46).
<string>: Zeigt die angegebene Zeichenkette als Markierungen. Autoren sollten nicht mehr als ein Zeichen in <string> angeben. Der UA kann Zeichenfolgen, die aus mehr als einem Graphem-Cluster bestehen, abschneiden oder ignorieren.

Formale Definition

Anfangswert	`none`
Anwendbar auf	alle Elemente
Vererbt	Ja
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

text-emphasis-style = 
  none                                                |
  [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ]  |
  <string>

Beispiele

Einfaches Beispiel

css

h2 {
  -webkit-text-emphasis-style: sesame;
  text-emphasis-style: sesame;
}

Spezifikationen

Spezifikation
CSS Text Decoration Module Level 3 # text-emphasis-style-property

Browser-Kompatibilität

Siehe auch

Die zugehörigen Eigenschaften text-emphasis-color, text-emphasis.
Die Eigenschaft text-emphasis-position, die es ermöglicht, die Position der Betonungsmarkierungen festzulegen.

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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

text-emphasis-style CSS property

Help improve MDN

`text-emphasis-style` CSS property