试一试
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: grammar-error;
text-decoration-line: spelling-error;
text-decoration-line: underline overline;
text-decoration-line: underline line-through;
<section id="default-example">
<p>
I'd far rather be
<span class="transition-all" id="example-element">happy than right</span>
any day.
</p>
</section>
p {
font: 1.5em sans-serif;
}
当同时设置多个线条装饰属性时，使用 text-decoration 简写属性可能更方便。
语法
css
/* Single keyword */
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: blink;
text-decoration-line: spelling-error;
text-decoration-line: grammar-error;
/* Multiple keywords */
text-decoration-line: underline overline; /* Two decoration lines */
text-decoration-line: overline underline line-through; /* Multiple decoration lines */
/* Global values */
text-decoration-line: inherit;
text-decoration-line: initial;
text-decoration-line: revert;
text-decoration-line: revert-layer;
text-decoration-line: unset;
text-decoration-line 属性指定为 none，或来自以下列表的一个或多个空格分隔值。
值
none-
不生成任何文本装饰。
下划线-
每行文本下方都有一条装饰线。
上划线-
每行文本上方都有一条装饰线。
删除线-
每行文本中间都有一条装饰线。
闪烁-
文本闪烁（在可见和不可见之间交替）。符合规范的用户代理可能不会闪烁文本。此值已弃用，建议使用CSS 动画。
拼写错误-
每行文本都使用用户代理突出显示拼写错误的方法，在大多数浏览器中，这是一条红色的虚线。
语法错误-
每行文本都使用用户代理突出显示语法错误的方法，在大多数浏览器中，这是一条绿色的虚线。
注意：当使用 spelling-error 和 grammar-error 值时，浏览器会忽略 text-decoration 简写中的其他属性（例如 text-underline-position、color 或 stroke）。
正式定义
| 初始值 | none |
|---|---|
| 应用于 | 所有元素。也适用于 ::first-letter 和 ::first-line。 |
| 继承性 | 否 |
| 计算值 | 同指定值 |
| 动画类型 | 离散 |
正式语法
text-decoration-line =
none |
[ underline || overline || line-through || blink ] |
spelling-error |
grammar-error
示例
基本示例
html
<p class="wavy">Here's some text with wavy red underline!</p>
<p class="both">This text has lines both above and below it.</p>
css
.wavy {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
}
.both {
text-decoration-line: underline overline;
}
错误示例
在此示例中，第一个段落包含一个拼写错误，并在拼错的单词上使用了浏览器对拼写错误的样式。第二个段落使用了浏览器对语法错误的样式。在不支持这些 text-decoration-line 值的浏览器中，没有样式更改。
html
<p>This text contains a <span class="spelling">speling</span> mistake.</p>
<p class="grammar">This text contain grammatical errors.</p>
css
.spelling {
text-decoration-line: spelling-error;
}
.grammar {
text-decoration-line: grammar-error;
}
规范
| 规范 |
|---|
| CSS 文本装饰模块级别 3 # text-decoration-line 属性 |
浏览器兼容性
加载中…
另见
- 当同时设置多个行装饰属性时，使用
text-decoration简写属性可能更方便，该属性也包括 text-underline-offset::spelling-error::grammar-error