zfb
GitHub リポジトリ

検索したい単語を入力

いつでも検索バーを開ける

下線のオフセット

下線のオフセットを整数のピクセル値、または 0 以上の任意の長さで設定します。

既存の下線を文字から離したり近づけたりします。オフセットは下線の位置を変えますが、下線の有無は切り替えません。

クラスと CSS の早見表

クラスの例期待される宣言
underline-offset-4text-underline-offset: 4px;
underline-offset-[0.15em]text-underline-offset: 0.15em;
例の設定

共通のプレビュー設定では spec 1、reset none、strict モード、spacingUnit 0.25rem、ブレークポイントなしを明示しています。ブラウザー標準のリンク下線を使い、text-underline-offset の違いが分かるようにしています。wind-demo はコンテナとリンク色のみを整えます。

使い方の例

固定値と相対値を比べる

前の2つはピクセル単位、最後は文字サイズに応じて変わる em 単位のオフセットです。

固定値と相対値を比べる
HTML
<div class="wind-demo-offsets">
  <p><a href="#offset-2" class="underline-offset-2">Two pixels / 2px</a></p>
  <p><a href="#offset-4" class="underline-offset-4">Four pixels / 4px</a></p>
  <p><a href="#offset-em" class="underline-offset-[0.15em]">Relative to text size / 文字サイズに応じた長さ</a></p>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-offsets {
  color: #223247;
  border: 1px solid #b7c5d4;
  padding: .6rem 1rem;
}

.wind-demo-offsets p {
  margin: 0;
  padding: .45rem 0;
  border-bottom: 1px solid #d8e0e8;
}

.wind-demo-offsets p:last-child {
  border-bottom: 0;
}

.wind-demo-offsets a {
  color: inherit;
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.underline-offset-\[0\.15em\] {
  text-underline-offset: 0.15em;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-offsets": true
    },
    "safelist": {
      "docs-preview": [
        "underline-offset-2",
        "underline-offset-4",
        "underline-offset-[0.15em]"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-offsets { color: #223247; border: 1px solid #b7c5d4; padding: 0.6rem 1rem; }
.wind-demo-offsets p { margin: 0; padding: 0.45rem 0; border-bottom: 1px solid #d8e0e8; }
.wind-demo-offsets p:last-child { border-bottom: 0; }
.wind-demo-offsets a { color: inherit; }

任意値と名前付きの値

underline-offset-4 のような整数の接尾辞は 4px です。underline-offset-[0.15em] のような任意値では、文字サイズに合わせて変化する長さを指定できます。このファミリーには名前付きオフセット、割合、負の値、auto キーワードはありません。下線と文字の関係が分かる範囲で間隔を調整します。

関連ガイド: ユーティリティの文法 · バリアント

カタログの詳細

underline-offset

フィールド値
カタログ識別子v1.underline-offset
クラスパターンunderline-offset-<suffix>
文法{"acceptedKinds":["integer","arbitrary"],"arbitraryProperty":"text-underline-offset","allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値この項目には独立した値の定義がありません。
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位text-underline-offset (46)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティtext-underline-offset

受け入れる値

この項目には独立した値の定義がありません。

宣言テンプレート

プロパティ値の種類固定値
text-underline-offsetresolvednull

カタログの例

クラスの例期待される宣言
underline-offset-4text-underline-offset: 4px

Revision History

作成更新