text-underline-position
Baseline 廣泛可用 *
text-underline-position CSS 屬性指定了使用 text-decoration 屬性的 underline 值設定的下劃線的位置。
試一試
text-underline-position: auto;
text-underline-position: under;
<section id="default-example">
<p>
<span class="transition-all" id="example-element"
>C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub></span
>
is the chemical formula for caffeine.
</p>
</section>
p {
font: 1.5em sans-serif;
}
#example-element {
text-decoration-line: underline;
}
語法
css
/* Single keyword */
text-underline-position: auto;
text-underline-position: under;
text-underline-position: left;
text-underline-position: right;
/* Multiple keywords */
text-underline-position: under left;
text-underline-position: right under;
/* Global values */
text-underline-position: inherit;
text-underline-position: initial;
text-underline-position: revert;
text-underline-position: revert-layer;
text-underline-position: unset;
值
正式定義
正式語法
text-underline-position =
auto |
[ from-font | under ] || [ left | right ]
示例
一個基本示例
我們建立了兩個示例文字段落。
html
<p class="horizontal">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur ac
turpis vel laoreet. Nullam volutpat pharetra lorem, sit amet feugiat tortor
volutpat quis. Nam eget sodales quam. Aliquam accumsan tellus ac erat posuere.
</p>
<p class="vertical">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur ac
turpis vel laoreet. Nullam volutpat pharetra lorem, sit amet feugiat tortor
volutpat quis. Nam eget sodales quam. Aliquam accumsan tellus ac erat posuere.
</p>
我們的 CSS 如下所示：
css
p {
font-size: 1.5rem;
text-transform: capitalize;
text-decoration: underline;
text-decoration-thickness: 2px;
}
.horizontal {
text-underline-position: under;
}
.vertical {
writing-mode: vertical-rl;
text-underline-position: left;
}
在此示例中，我們將兩個段落都設定為粗下劃線。在水平文字中，我們使用 text-underline-position: under; 將下劃線置於所有下行字母下方。
在設定了垂直 writing-mode 的文字中，我們可以使用 left 或 right 值，根據需要使下劃線出現在文字的左側或右側。
即時示例如下：
全域性設定 text-underline-position
由於 text-underline-position 屬性是繼承的，並且不會被 text-decoration 簡寫屬性重置，因此在全域性級別設定其值可能是合適的。例如，under 值可能適用於包含大量下標的化學和數學公式的文件。
css
:root {
text-underline-position: under;
}
規範
| 規範 |
|---|
| CSS 文字裝飾模組級別 3 # text-underline-position 屬性 |
瀏覽器相容性
載入中…
另見
text-decoration屬性是設定大多數文字裝飾屬性的簡寫，包括text-decoration-line、text-decoration-color和text-decoration-style。但是，它不設定text-underline-position。