方法：1、给元素设置“text-decoration:underline;color:颜色值”样式即可；2、使用border-bottom属性，只需要给元素设置“border-bottom:大小 样式 颜色”样式即可。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
有两个方法
● 第一个就是给标签加上一个text-decoration:underline，属性，设置下划线的颜色需要设置元素的color属性，缺点是文字颜色和下划线颜色是一致的，不能单独控制。
示例：
立即学习“前端免费学习笔记（深入）”；
Document .css-00F { text-decoration:underline; color: #090; }css实践之文字下划线颜色-我的下划线与文字为绿色
效果：
![]O05UXBYTS77$D8`GAH_%[V.png](https://www.chuangxiangniao.com/wp-content/uploads/2025/12/1623118730930254.png "1623118730930254.png")
● 第二个就是给标签加一个底部边框：border-bottom:1px solid red，要想与文字有间距使用padding-bottom属性就可以了！第二种可以单独控制下划线的样式！
（推荐学习：CSS视频教程）
在需要改变的文字下划线样式地方，使用css border-bottom下边框样式来变通地实现替代text-decoration下划线样式的效果；通过对文字设置下边框颜色、下边框宽度、下边框虚线或实线等CSS样式控制实现需要各式各样下划线效果。
示例：
立即学习“前端免费学习笔记（深入）”；
Document .css-F00 { border-bottom: 1px solid #f00; } .css-00F { border-bottom: 1px solid #00f; color: #090; } .css-333 { border-bottom: 1px solid #333; }css实践之文字下划线颜色-我的下划线实现为红色
css实践之文字下划线颜色-我的下划线实现为蓝色，文字为绿色
css实践之文字下划线颜色-我的下划线实现为黑色
效果：
![NVHWE_MUGIBFD]$WGLG~WOF.png](https://www.chuangxiangniao.com/wp-content/uploads/2025/12/1623118353138653.png "1623118353138653.png")
推荐学习：html视频教程
以上就是html下划线颜色怎么改的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1550321.html
微信扫一扫 
支付宝扫一扫 
