用文字“画线”：HTML 文本装饰的实用指南

在网页上，一条简单的文字，往往不止是信息的承载。用对装饰，能让无序的文本变得清晰，也能让设计更贴近阅读习惯。text-decoration 是 HTML 里不张扬但很有力的工具，它能给链接加下划线、给强调内容打上删除线，甚至让你的文字在关键处产生微妙的视觉跳点。

从无到有：掌握基础属性

默认情况下，浏览器会给链接加上一条下划线，那是浏览器的默认样式。而使用 CSS 的 text-decoration 可以更精细地控制这些装饰的显示与隐藏。

• underline：给文字添加下划线，常用于强调或指示链接。
• line-through：添加一条贯穿文字的删除线，常用于表示“已取消”或“不适用”的内容。
• overline：在文字上方添加一条横线，多用于特殊强调或不常用场景。
• none：隐藏所有装饰，用于移除浏览器默认样式。

a {
  text-decoration: underline;
}

.invalid {
  text-decoration: line-through;
}

场景化应用：让装饰更有意义

装饰的目的是提升信息的可读性与可理解性，而不是堆砌视觉。在长段落中，重点信息需要更突出的提示，而在表格或列表中，需要区分状态与状态。

• 强调与引导：在操作指引或关键提示处使用下划线，让读者一眼识别关键动作。
• 状态区分：在表格或导航中，对“已过期/不可用/暂不可选”的项使用删除线，快速传达状态。
• 特殊语气：在诗歌或标语中，overline 可以营造特定的语感或情绪。

/* 指引提示 */
.highlight {
  text-decoration: underline;
}

/* 过期项快速识别 */
.expired {
  text-decoration: line-through;
}

进阶技巧：与伪类和状态联动

将装饰与 :hover、:focus、:active 等伪类结合，能做出更动态的反馈，提升交互体验。

• 悬停反馈：让链接在悬停时显示下划线，点击后恢复默认，增强可点击感。
• 焦点状态：在可聚焦元素（如按钮、表单）获得焦点时显示下划线，让键盘操作更清晰。
• 活动状态：为当前激活的导航项添加下划线，突出当前路径。

a:hover {
  text-decoration: underline;
}

button:focus {
  text-decoration: underline;
}

nav a:active {
  text-decoration: underline;
}

风格一致性：装饰的边界与规范

装饰不是万能的，过度使用会让页面显得杂乱。建议遵循以下原则：

• 少即是多：每段文字只在一处使用装饰，避免密集堆砌。
• 颜色一致：若页面有统一配色，装饰颜色应与整体风格一致，或使用与文字对比度高的颜色保证可读性。
• 语义优先：装饰不是替代语义标签（如 、）的手段，语义清晰才能让无障碍阅读顺畅。