文本装饰

类名	样式
.下划线偏移-1	text-underline-offset: 0.125em;
.下划线偏移-2	text-underline-offset: 0.25em;
.下划线偏移-3	text-underline-offset: 0.375em;
.underline-primary	--bs-underline-color: light-dark(var(--bs-blue-600), var(--bs-blue-400)); text-decoration-color: var(--bs-underline-color);
.下划线-强调	--bs-underline-color: light-dark(var(--bs-indigo-600), color-mix(in oklch, var(--bs-indigo-400), var(--bs-indigo-300))); text-decoration-color: var(--bs-underline-color);
.underline-success	--bs-underline-color: light-dark(var(--bs-green-600), var(--bs-green-400)); text-decoration-color: var(--bs-underline-color);
.underline-danger	--bs-underline-color: light-dark(var(--bs-red-600), var(--bs-red-400)); text-decoration-color: var(--bs-underline-color);
.underline-warning	--bs-underline-color: light-dark(var(--bs-yellow-700), var(--bs-yellow-400)); text-decoration-color: var(--bs-underline-color);
.underline-info	--bs-underline-color: light-dark(var(--bs-cyan-600), var(--bs-cyan-400)); text-decoration-color: var(--bs-underline-color);
.underline-inverse	--bs-underline-color: light-dark(var(--bs-gray-900), var(--bs-gray-200)); text-decoration-color: var(--bs-underline-color);
.underline-secondary	--bs-underline-color: light-dark(var(--bs-gray-600), var(--bs-gray-400)); text-decoration-color: var(--bs-underline-color);
.underline-10	text-decoration-color: color-mix(in oklch, var(--bs-underline-color, currentcolor) 10%, transparent);
.underline-20	text-decoration-color: color-mix(in oklch, var(--bs-underline-color, currentcolor) 20%, transparent);
.underline-30	text-decoration-color: color-mix(in oklch, var(--bs-underline-color, currentcolor) 30%, transparent);
.underline-40	text-decoration-color: color-mix(in oklch, var(--bs-underline-color, currentcolor) 40%, transparent);
.underline-50	text-decoration-color: color-mix(in oklch, var(--bs-underline-color, currentcolor) 50%, transparent);
.underline-60	text-decoration-color: color-mix(in oklch, var(--bs-underline-color, currentcolor) 60%, transparent);
.underline-70	text-decoration-color: color-mix(in oklch, var(--bs-underline-color, currentcolor) 70%, transparent);
.underline-80	text-decoration-color: color-mix(in oklch, var(--bs-underline-color, currentcolor) 80%, transparent);
.underline-90	text-decoration-color: color-mix(in oklch, var(--bs-underline-color, currentcolor) 90%, transparent);
.underline-100	text-decoration-color: var(--bs-underline-color, currentcolor);
.下划线-厚度-1	text-decoration-thickness: 1px;
.下划线-厚度-2	text-decoration-thickness: 2px;
.下划线-厚度-3	text-decoration-thickness: 3px;
.下划线-厚度-4	text-decoration-thickness: 4px;
.下划线-厚度-5	text-decoration-thickness: 5px;
.text-decoration-none	text-decoration: none;
.text-decoration-underline	text-decoration: underline;
.文本装饰-删除线	text-decoration: line-through;

使用文本装饰类装饰组件中的文本。

这段文字下面有一条线。

这段文字有一条线穿过它。

此链接的文本装饰已被移除

HTML

<p class="text-decoration-underline">This text has a line underneath it.</p>
<p class="text-decoration-line-through">This text has a line going through it.</p>
<a href="#" class="text-decoration-none">This link has its text decoration removed</a>

下划线

偏移

更改下划线与文本的距离。偏移量设置为em单位，以便自动随元素当前的font-size进行缩放。

HTML

<p><a href="#">Default link</a></p>
<p><a class="underline-offset-1" href="#">Offset 1 link</a></p>
<p><a class="underline-offset-2" href="#">Offset 2 link</a></p>
<p><a class="underline-offset-3" href="#">Offset 3 link</a></p>

颜色

更改下划线的颜色，而不改变文本颜色。

HTML

<p><a href="#" class="underline-primary">Primary underline</a></p>
<p><a href="#" class="underline-accent">Accent underline</a></p>
<p><a href="#" class="underline-success">Success underline</a></p>
<p><a href="#" class="underline-danger">Danger underline</a></p>
<p><a href="#" class="underline-warning">Warning underline</a></p>
<p><a href="#" class="underline-info">Info underline</a></p>
<p><a href="#" class="underline-inverse">Inverse underline</a></p>
<p><a href="#" class="underline-secondary">Secondary underline</a></p>

不透明度

更改下划线的不透明度。默认会使当前文本颜色褪色，或者与.underline-{color}配合使用，先设置一个颜色，然后将不透明度与该颜色混合。

HTML

<p><a class="underline-10" href="#">Underline opacity 10</a></p>
<p><a class="underline-20" href="#">Underline opacity 20</a></p>
<p><a class="underline-30" href="#">Underline opacity 30</a></p>
<p><a class="underline-40" href="#">Underline opacity 40</a></p>
<p><a class="underline-50" href="#">Underline opacity 50</a></p>
<p><a class="underline-60" href="#">Underline opacity 60</a></p>
<p><a class="underline-70" href="#">Underline opacity 70</a></p>
<p><a class="underline-80" href="#">Underline opacity 80</a></p>
<p><a class="underline-90" href="#">Underline opacity 90</a></p>
<p><a class="underline-100" href="#">Underline opacity 100</a></p>

将不透明度类与颜色类配对，以淡化该特定颜色，而不是默认文本颜色：

褪色的成功下划线

HTML

<a class="theme-success underline-success underline-30 hover:underline-80" href="#">Faded success underline</a>

厚度

更改下划线的粗细。

HTML

<p><a href="#">Default link</a></p>
<p><a class="underline-thickness-1" href="#">Thickness 1 link</a></p>
<p><a class="underline-thickness-2" href="#">Thickness 2 link</a></p>
<p><a class="underline-thickness-3" href="#">Thickness 3 link</a></p>
<p><a class="underline-thickness-4" href="#">Thickness 4 link</a></p>
<p><a class="underline-thickness-5" href="#">Thickness 5 link</a></p>

悬停变体

.underline-offset、.underline-{N} 和 .underline-thickness 工具默认包含 :hover 个变体。混合搭配以创建独特的链接样式。

悬停时下划线偏移和不透明度变化

HTML

<a class="underline-offset-2 hover:underline-offset-3 underline-10 hover:underline-50 hover:underline-thickness-2" href="#">
  Underline with offset and opacity changes on hover
</a>

CSS

Sass 工具 API

文本装饰工具类在我们的工具类 API scss/_utilities.scss 中声明。了解如何使用工具类 API。

scss/_utilities.scss

"underline-offset": (
  property: text-underline-offset,
  class: underline-offset,
  state: hover,
  values: (
    1: .125em,
    2: .25em,
    3: .375em,
  )
),
"underline-color": (
  property: (
    "--underline-color": null,
    "text-decoration-color": var(--underline-color)
  ),
  class: underline,
  values: theme-color-values("fg"),
),
"underline-opacity": (
  property: text-decoration-color,
  class: underline,
  state: hover,
  values: theme-opacity-values(--underline-color, currentcolor)
),
"underline-thickness": (
  property: text-decoration-thickness,
  class: underline-thickness,
  state: hover,
  values: (
    1: 1px,
    2: 2px,
    3: 3px,
    4: 4px,
    5: 5px,
  )
),