css下划线颜色怎么改

如果想改变文字下划线颜色,不能使用text-decoration下划线样式单词来实现,也不能使用html下划线u标签实现,而是使用border边框样式实现。

css下划线颜色怎么改

有两个方法

● 第一个就是给标签加上一个:text-decoration:underline,属性,设置下划线的颜色需要设置元素的color属性,缺点是文字颜色和下划线颜色是一致的,不能单独控制。

● 第二个就是给A标签加一个底部边框:border-bottom:1px solid red,要想与文字有间距使用padding-bottom属性就可以了!第二种可以单独控制下划线的样式!

(推荐学习:CSS视频教程

在需要改变的文字下划线样式地方,使用css border-bottom下边框样式来变通地实现替代text-decoration下划线样式的效果;通过对文字设置下边框颜色、下边框宽度、下边框虚线或实线等CSS样式控制实现需要各式各样下划线效果。

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.css-F00{ border-bottom:1px solid #F00} 
.css-00F{ border-bottom:1px solid #00F; color:#090} 
.css-333{ border-bottom:1px solid #333} 
</style>
</head>
<body>
<p> 
css实践之文字下划线颜色-<span>我的下划线实现为红色</span> 
</p> 
<p> 
css实践之文字下划线颜色-<span>我的下划线实现为蓝色,文字为绿色</span> 
</p> 
<p> 
css实践之文字下划线颜色-<span>我的下划线实现为黑色</span> 
</p> 
</body>
</html>

1.jpg-600

更多CSS相关技术文章,请访问CSS3答疑栏目进行学习!

以上就是css下划线颜色怎么改的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » CSS3 答疑