text-emphasis-color

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-color CSS Eigenschaft legt die Farbe von Hervorhebungszeichen fest. Dieser Wert kann auch mit der text-emphasis Kurzform festgelegt werden.

Probieren Sie es aus

text-emphasis-color: currentColor;

text-emphasis-color: red;

text-emphasis-color: rgba(90, 200, 160, 0.8);

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

#example-element {
  text-emphasis: filled;
}

Syntax

css
/* Initial value */
text-emphasis-color: currentcolor;

/* <color> */
text-emphasis-color: #555;
text-emphasis-color: blue;
text-emphasis-color: rgb(90 200 160 / 80%);
text-emphasis-color: transparent;

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

Werte

<color>

Definiert die Farbe der Hervorhebungszeichen. Wenn keine Farbe angegeben ist, wird standardmäßig currentcolor verwendet.

Formale Definition

Anfangswertcurrentcolor
Anwendbar aufalle Elemente
VererbtJa
Berechneter Wertberechnete Farbe
AnimationstypFarbe

Formale Syntax

text-emphasis-color = 
  <color>

Beispiele

Hervorhebung mit einer Farbe und einem benutzerdefinierten Zeichen

CSS

css
em {
  text-emphasis-color: green;
  text-emphasis-style: "*";
}

HTML

html
<p>Here's an example:</p>

<em>This has emphasis marks!</em>

Ergebnis

Spezifikationen

Specification
CSS Text Decoration Module Level 3
# text-emphasis-color-property

Browser-Kompatibilität

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Siehe auch