CSS - text-underline-offset

概要

属性名	text-underline-offset
値	auto \| <length> \| <percentage>
初期値	auto
適用可能要素	すべての要素
継承	継承する
サポート	https://caniuse.com/?search=text-underline-offset

説明

下線の表示場所を指定します。

値	説明
auto	ブラウザのデフォルトの場所に下線をひきます。
<length>	下線までの距離を長さで指定します。
<percentage>	下線までの距離をパーセントで指定します。

使用例

CSS

.uline {
  text-decoration: underline;
  font-size: 20pt;
  margin-bottom: 2rem;
}
.tuo-auto {
  text-underline-offset: auto;
}
.tuo-10px {
  text-underline-offset: 10px;
}
.tuo-50p {
  text-underline-offset: 50%;
}

HTML

<div class="uline tuo-auto">Hello</div>
<div class="uline tuo-10px">Hello</div>
<div class="uline tuo-50p">Hello</div>

表示

Hello

リンク

初版：2022年8月21日、最終更新：2022年8月21日

https://www.tohoho-web.com/css/prop/text-underline-offset.htm

CSS - text-underline-offset

概要

説明

使用例

関連項目

リンク