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 2022年3月.
text-emphasis-color は CSS のプロパティで、圏点の色を設定します。この値は一括指定の text-emphasis を使用して設定することもできます。
試してみましょう
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;
}
構文
css
/* 初期値 */
text-emphasis-color: currentcolor;
/* <color> */
text-emphasis-color: #555;
text-emphasis-color: blue;
text-emphasis-color: rgba(90, 200, 160, 0.8);
text-emphasis-color: transparent;
/* グローバル値 */
text-emphasis-color: inherit;
text-emphasis-color: initial;
text-emphasis-color: revert;
text-emphasis-color: revert-layer;
text-emphasis-color: unset;
値
<color>-
記号の色を定義します。 color が存在しない場合、既定で
currentcolorになります。
公式定義
| 初期値 | currentcolor |
|---|---|
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | 色の計算値 |
| アニメーションの種類 | 色 |
形式文法
text-emphasis-color =
<color>
例
色と固有の文字で強調
CSS
css
em {
text-emphasis-color: green;
text-emphasis-style: "*";
}
HTML
html
<p>例:</p>
<em>これには圏点があります！</em>
結果
仕様書
| Specification |
|---|
| CSS Text Decoration Module Level 3 # text-emphasis-color-property |
ブラウザーの互換性
Loading…
関連情報
<color>データ型- 他の強調記号に関するプロパティ:
text-emphasis-style,text-emphasis,text-emphasis-position. - 色に関する他のプロパティ:
color,background-color,border-color,outline-color,text-emphasis-color,text-shadow,caret-color,column-rule-color - CSS を使用した HTML 要素への色の適用