text-decoration-skip-ink

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

text-decoration-skip-inktext-decoration 一括指定の一部ではありません。

構文

/* 単一キーワード */
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>

<p class="no-skip-ink">Or maybe you'd prefer some tea?</p>

CSS コンテンツ

p {
  font-size: 2em;
  text-decoration: underline blue;
  text-decoration-skip-ink: auto; /* this is the default anyway */
}

.no-skip-ink {
  text-decoration-skip-ink: none;
}

結果

仕様書

仕様書 状態 備考
CSS Text Decoration Module Level 4
text-decoration-skip-ink の定義
草案 初回定義
初期値auto
適用対象すべての要素
継承あり
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法における値の出現順

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
text-decoration-skip-inkChrome 完全対応 64Edge 未対応 なしFirefox 完全対応 70IE 未対応 なしOpera 完全対応 50Safari 未対応 なしWebView Android 完全対応 64Chrome Android 完全対応 64Firefox Android 未対応 なしOpera Android 完全対応 46Safari iOS 未対応 なしSamsung Internet Android 完全対応 9.0

凡例

完全対応  
完全対応
未対応  
未対応

関連情報