text-decoration-skip-ink

CSStext-decoration-skip-ink プロパティは、上線や下線が文字のアセンダーやディセンダーを通過するときにどのように引くのかを指定します。

構文

/* 単一キーワード */
text-decoration-skip-ink: none;
text-decoration-skip-ink: auto;

/* グローバルキーワード */
text-decoration-skip: inherit;
text-decoration-skip: initial;
text-decoration-skip: unset;

none
下線と上線は、アセンダーとディセンダーの部分を含め、テキストコンテンツの全体に渡って引かれます。
auto
既定値です。 — 下線と上線は文字に接したり近づいたりしない部分にのみ引かれます。つまり、文字を横切ろうとするところで中断されます。
"text-decoration-skip: ink;" の例

形式文法

auto | none

HTML コンテンツ

<p>You should go and grab a cup of coffee.</p>

CSS コンテンツ

p {
  margin: 0;
  font-size: 2em;
  text-decoration: underline blue;
  text-decoration-skip-ink: auto;
}

結果

仕様書

仕様書 状態 備考
CSS Text Decoration Module Level 4
text-decoration-skip-ink の定義
草案 初回定義

初期値auto
適用対象すべての要素
継承あり
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法における値の出現順

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応64 なし なし なし50 なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応6464 なし なし50 なし なし

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,