CSS改变字体下划线颜色

下图是网页中一个很普通的列表。

这次去见客户的时候,客户觉得下划线的颜色可以变变,网页就变得不单调了(据后来了解,客户上学时出板报,所以对网站的布局和细节非常的重视)。做网站那么久,第一次要换下划线颜色,客户就是上帝,提出这个需求,立马查阅相关资料,发现下划线颜色是随着字体的颜色改变的,不能单独改变。

额,那怎么办?

办法总比困难多,通过使用css border-bottom实现改变文字字体下划线颜色即可。

CSS代码:style="border-bottom: 1px solid blue;text-decoration:none"

效果如下图

最好要把原有下划线去掉,不然下划线会变得不太美观。

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-03 22:58:59

CSS改变字体下划线颜色的相关文章

Android之自定义EditText光标和下划线颜色

"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Android之自定义EditText光标和下划线颜色 - Lindroid的博客 - 博客频道 - CSDN.NET Lindroid的博客 不积跬步,无以至千里. 目录视图 摘要视图 订阅 [活动]2017 CSDN博客专栏评选 &nbsp [5月书讯]流畅的Py

[CSS]textarea设置下划线格式

功能要求:1:如何实现在多行文本框textarea里面每一行下面都有一条横线  2:textarea文本框里面有一段不能删掉 实现方法:横线用背景图片来做,不动的文字用浮动层+给textarea增加text-indent来实现缩进. 源代码如下: <!DOCTYPE html> <html lang="zh"> <head> <meta http-equiv="Content-Type" content="text

android-TimePickerDialog 下划线颜色修改

首先就是去framework下去找与之相关的theme属性 最开始的时候,直接找的是<item name="datePickerStyle">@style/Widget.Funui.DatePicker</item> ,但是,往父类里面找的话,并没有找到有效属性,仅仅就有一个布局 <item name="android:internalLayout">@android:layout/date_picker_holo</ite

利用CSS改变输入框的光标颜色

转:http://www.cnblogs.com/gymmer/p/6810367.html 代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 input,

CSS制作hover下划线动画

.demo1{ position: relative; text-decoration: none; font-size: 20px; color: #333; } .demo1:before{ content: ""; position: absolute; left: 50%; bottom: -2px; width: 0; height: 2px; background: #4285f4; transition: all .3s; } .demo1:hover:before{ w

使用NSMutableAttributedString添加下划线、删除线、阴影、填充、不同字体颜色等

在iOS开发中,有时会遇到需要添加下划线,或者设置字符串中某几个字的颜色的情况,最常见的栗子就是注册页面,如图所示: 几乎所有注册页面中都会出现这么一句话 "点击下一步表示您已同意<用户服务协议>",而且可以看到,"<用户服务协议>"几个字是橙色的,并且它们下面还有下划线.这是怎么实现的呢? 有的同学可能会说:"不同颜色就设置两个label,让左边的label显示前半句并设置为黑色,让右边的label显示后半句并设置为橙色就行了.&

DIV+CSS虚线边框|CSS虚线下划线及虚线列表教程

DIV CSS虚线教程篇包括讲解常常出现的各种样式的DIV虚线案例CSS教程. 本节为大家介绍常见的CSS 虚线及DIV教程.CSS虚线下划线.列表虚线统统搞定. 目录 CSS虚线边框 CSS超链接虚线下划线 列表型CSS虚线下划线 CSS定义一条水平虚线 1.CSS边框虚线   -   TOP 这里通过边框属性的虚线边框border控制虚线.以下设置的css 高度(css height)和css 宽度(css width)为350像素是为了便于观看演示 其它意思.一.四边为虚线边框border

[HTML/CSS]导航栏的下划线跟随效果

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatib

05使用CSS设置字体和文本样式

使用CSS设置字体和文本样式: 1.定义字体类型font-family 用法: font-family:name; font-family:ncursive|fantasy|monospace|serif|sans-serif name表示字体名称,可指定多种字体,用空格隔开.按优先顺序排列.如果字体名称包含空格,则应该使用括号()括起来. font是一个复合属性,所谓复合属性是指该属性能够设置多种字体属性,用法如下: font:font-style||font-variant||font-we