text-decoration用法

text-decoration 是用于设置文本装饰（如下划线、删除线等）的 CSS 属性。
常用的属性值包括：

none：默认值，不显示任何文本装饰。
underline：显示下划线。
overline：显示上划线。
line-through：显示删除线。
blink：显示闪烁的文本。

可以通过以下方式来设置 text-decoration 属性：
/* 设置下划线 */
text-decoration: underline;

/* 设置删除线 */
text-decoration: line-through;

/* 同时设置下划线和删除线 */
text-decoration: underline line-through;

/* 取消文本装饰 */
text-decoration: none;
登录后复制
此外，还可以通过 text-decoration-color 属性来设置文本装饰的颜色，通过 text-decoration-style 属性来设置文本装饰的样式（如虚线、双线等）。

相关问题

.Text_underline{ display: inline-block; text-decoration: underline; } .Text_underline::before { display: inline-block; content: " "; width: 1em; height: 1em; } .Text_underline::after { display: inline-block; content: " "; width: 1em; height: 1em; text-decoration: underline; } 给content: " "; 设置 text-decoration: underline; 无效

你是正确的，text-decoration 属性不适用于 content 属性中的文本内容。text-decoration 只能应用于实际的文本内容，而不是伪元素中的空格。
如果你想要在伪元素中显示下划线，可以使用其他方法，比如使用 border-bottom 来模拟下划线效果。下面是一个示例：
.Text_underline::before {
display: inline-block;
content: "";
width: 1em;
height: 1px;
background-color: black;
margin-right: 0.5em;
}

.Text_underline::after {
display: inline-block;
content: "";
width: 1em;
height: 1px;
background-color: black;
margin-left: 0.5em;
}
登录后复制
在这个示例中，我们通过添加一个空的伪元素，并设置其宽度为 1em，高度为 1px，背景颜色为黑色来模拟下划线效果。同时，我们通过设置 margin-right 和 margin-left 来调整伪元素与文本之间的间距。
这样，通过添加 .Text_underline 类名到 span 元素上，伪元素就会显示出类似下划线的效果。

text-decoration 颜色

text-decoration 属性用于设置文本的装饰效果，如下划线、上划线、删除线等。虽然 text-decoration 属性本身并不直接设置颜色，但它可以与 text-decoration-color 属性结合使用来指定装饰线条的颜色。
以下是一些常见的用法示例：

下划线：
.underline {
text-decoration: underline;
text-decoration-color: red;
}
登录后复制

上划线：
.overline {
text-decoration: overline;
text-decoration-color: blue;
}
登录后复制

删除线：
.line-through {
text-decoration: line-through;
text-decoration-color: green;
}
登录后复制

组合使用：
.combined {
text-decoration: underline overline line-through;
text-decoration-color: purple;
}
登录后复制

通过这些示例，你可以看到 text-decoration 属性用于设置装饰线条的类型，而 text-decoration-color 属性用于设置这些线条的颜色。