微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

css下划线颜色修改

CSS可以很方便地修改下划线的颜色和样式,下面我们来介绍一下如何修改下划线的颜色。

a {
   text-decoration: underline;
   text-decoration-color: red;
}

css下划线颜色修改

在上面的代码中,我们设置了a标签的下划线样式为实线,颜色为红色。下划线的颜色属性是text-decoration-color,它认是inherit,也就是继承父元素的颜色。

a:hover {
   text-decoration-color: blue;
}

还可以设置鼠标悬停时的下划线颜色,通过:hover伪类选择器来实现。在上面的代码中,我们设置了a标签鼠标悬停时的下划线颜色为蓝色。

a {
   border-bottom: 1px solid green;
}

除了使用text-decoration-color属性修改下划线颜色外,还可以通过border-bottom属性来设置,如上面的代码所示。这种方式会覆盖text-decoration-color的设置,所以要注意。

总之,使用CSS修改下划线颜色非常简单,只需要几行代码就能轻松实现。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。