文本装饰
underline/overline/line-through 装饰线、颜色、样式、粗细
文本装饰
text-decoration 给文字添加下划线、删除线、上划线——不再是 <u> 标签的事情。
学完本章你将： 掌握 text-decoration-line/color/style/thickness。
装饰线
css
.underline { text-decoration: underline; } /* 下划线 */
.overline { text-decoration: overline; } /* 上划线 */
.line-through { text-decoration: line-through; } /* 删除线 */
.none { text-decoration: none; } /* 去掉（链接常用） */精细控制
css
.fancy {
text-decoration-line: underline;
text-decoration-color: red; /* 装饰线颜色 */
text-decoration-style: wavy; /* solid/double/dotted/dashed/wavy */
text-decoration-thickness: 2px; /* 粗细 */
}
/* 简写 */
.fancy-short {
text-decoration: underline wavy red 2px;
}去除链接下划线
css
a { text-decoration: none; }
/* 悬停时显示 */
a:hover { text-decoration: underline; }实用组合
css
/* 价格——原价删除线 */
.old-price {
text-decoration: line-through;
color: #999;
}
/* 波浪下划线——强调 */
mark {
background: transparent;
text-decoration: underline wavy #FF6B6B;
}