零基础CSS下划线教程：从入门到创意

快速体验

1. 打开 InsCode(快马)平台 https://www.inscode.net
2. 输入框内输入如下内容：

   制作一个交互式学习模块，分步教学：1) 基础text-decoration使用 2) border模拟下划线 3) 伪元素实现自定义下划线 4) 简单动画效果。每个步骤提供代码沙盒、可视化调节面板（颜色/粗细/间距）和常见错误提示。最后整合所有知识创建一个'个人简历装饰'实战项目。

3. 点击'项目生成'按钮，等待项目生成完整后预览效果

最近在学习前端开发时，发现CSS下划线这个看似简单的功能其实藏着不少学问。作为新手，刚开始只会用text-decoration，后来慢慢发现原来下划线可以玩出这么多花样。今天就把我的学习笔记整理分享出来，希望能帮助到同样在入门的小伙伴们。

1. 最基础的text-decoration用法

刚开始接触CSS下划线时，最先学的就是text-decoration属性。这个属性用起来特别简单，只需要一行代码就能给文字加上下划线。但这里有几个新手容易踩的坑：

• 下划线默认是黑色的，可能和文字颜色不一致
• 下划线会穿过字母的降部（比如g、y这些字母的下半部分）
• 不能单独控制下划线的粗细和样式

虽然简单，但在不需要特别定制的情况下，这个属性已经足够应付大多数基本需求了。

2. 进阶玩法：用border模拟下划线

想要更灵活的控制下划线样式，可以使用border-bottom来模拟。这个方法最大的优点是：

• 可以自由设置颜色、粗细和样式（实线、虚线等）
• 可以通过padding-bottom控制下划线和文字的间距
• 不会穿过字母的降部，看起来更美观

不过要注意的是，使用border时需要将元素设为inline-block，否则下划线会占满整行。此外，如果用在链接上，记得把默认的text-decoration去掉。

3. 伪元素实现自定义下划线

想要更炫酷的效果，可以尝试用::after伪元素来创建下划线。这种方法可以说是打开了新世界的大门：

• 可以做出渐变色下划线
• 实现波浪线、点线等特殊形状
• 控制下划线的长度（不完全跟随文字）
• 添加hover时展开动画

虽然实现起来稍微复杂一点，但效果绝对值得。记得要设置content: ''和display: block，否则伪元素不会显示。

4. 添加简单的动画效果

让下划线动起来可以大大增加页面的活力。最简单的实现方式是结合transition和transform属性：

• hover时下划线从左向右展开
• 点击时下划线颜色渐变
• 滚动时下划线跟随移动

动画的关键是要控制好持续时间和缓动函数，太快的动画会显得突兀，太慢又会让人感觉卡顿。建议新手先从0.3秒的过渡时间开始尝试。

实战：个人简历装饰项目

把以上学到的技巧综合运用，我给自己做了个简历页面装饰：

1. 标题使用渐变色下划线
2. 工作经历部分用虚线分隔
3. 技能标签hover时有展开动画
4. 联系方式用波浪线突出显示

这个项目不仅巩固了所学知识，还让我的简历看起来专业又有创意。建议新手也尝试做一个类似的练习项目，把理论知识转化为实际技能。

在学习过程中，我发现在InsCode(快马)平台上实践特别方便。它内置的代码编辑器可以实时看到效果，还能一键部署分享给朋友看。最让我惊喜的是，不用配置任何环境，打开网页就能开始写代码，对新手特别友好。

CSS下划线虽然是个小功能，但通过不断尝试和实践，我发现前端开发真的有很多可以探索的空间。希望这篇笔记能帮你少走些弯路，快速掌握这个实用的技能。

快速体验

1. 打开 InsCode(快马)平台 https://www.inscode.net
2. 输入框内输入如下内容：

   制作一个交互式学习模块，分步教学：1) 基础text-decoration使用 2) border模拟下划线 3) 伪元素实现自定义下划线 4) 简单动画效果。每个步骤提供代码沙盒、可视化调节面板（颜色/粗细/间距）和常见错误提示。最后整合所有知识创建一个'个人简历装饰'实战项目。

3. 点击'项目生成'按钮，等待项目生成完整后预览效果