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

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQXVndXMzMzQ0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

这次去见客户的时候，客户认为下划线的颜色能够变变。网页就变得不单调了（据后来了解，客户上学时出板报。所以对站点的布局和细节很的重视）。做站点那么久，第一次要换下划线颜色。客户就是上帝，提出这个需求，立刻查阅相关文档，发现下划线颜色是随着字体的颜色改变的，不能单独改变。

额。那怎么办？

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

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

效果例如以下图

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQXVndXMzMzQ0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

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

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

  1. iOS - UIButton设置文字标题下划线以及下划线颜色

    创建button设置可以折行显示 - (void)viewDidLoad { [super viewDidLoad]; UIButton * button = [[UIButton alloc] in ...

  2. 不可思议的纯CSS导航栏下划线跟随效果

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

  3. [CSS]textarea设置下划线格式

    功能要求:1:如何实现在多行文本框textarea里面每一行下面都有一条横线  2:textarea文本框里面有一段不能删掉 实现方法:横线用背景图片来做,不动的文字用浮动层+给textarea增加t ...

  4. 纯css导航栏下划线

    .nav-underline > *{/* 指定容器,里面可以是li.span等多样化的元素 */ display: inline-block; margin: -3px; padding: 1 ...

  5. TimePickerDialog -下划线颜色修改

    首先就是去framework下去找与之相关的theme属性 最开始的时候,直接找的是<item name="datePickerStyle">@style/Widget ...

  6. jquery之css（）改变字体大小，颜色，背景色

    转: <script type="text/javascript"> $(document).ready(function() {         $("#f ...

  7. 通过css改变svg img的颜色

    需求如下图,hover的时候改变图标颜色,图标为引入的svg img 一般的解决办法有:1.字体图标改变css的color属性:2.js在hover事件中切换图片:3.老一点的方案是hover切换背景 ...

  8. Android 入门（2）修改EditText下划线颜色 / 隐藏标题栏

    1 添加颜色 colors.xml中增加 <color name="colorRed">#FF3300</color> 2 添加style styles.x ...

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

    转:http://www.cnblogs.com/gymmer/p/6810367.html 代码: <!DOCTYPE html> <html lang="en" ...

随机推荐

  1. android intent 跳转

    转自:http://blog.sina.com.cn/s/blog_7309444701014u2d.html 一.不需要返回值的跳转 Intent intent=new Intent(); inte ...

  2. Glide使用详解（一）

    一. 下载 在build.gradle中添加依赖: compile 'com.github.bumptech.glide:glide:3.7.0' 需要support-v4库的支持,如果你的项目没有s ...

  3. Linux内核锁与中断处理

    Linux内核锁 在Linux内核里面,一般采用了如下几种锁的机制,来保证多线程的同步与互斥: (1)原子操作 atomic_t v: void atomic_set(atomic_t *v, int ...

  4. zabbix web监测

    web monitoring(监测)属于业务监控,用来监控Web站点多方面的可用性,可以监控Web站点的下载速度.返回码和响应时间.Zabbix能够检测HTML中包含的预先定义的字符串,也可以模拟登录 ...

  5. MyEclipse导入Hibernate出现Path must include project and resource；/project name

    如图,在MyEclipse 2014以下版本中都没遇见这个问题. 在导入Hibernate框架的时候,可以说真的随缘,运气不好,明明配置全都没问题,还是连续几次失败,这个时候除了烧高香拜拜,也只能靠百 ...

  6. Angular 学习笔记——ng-Resource1

    <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...

  7. 系统封装 如何为原生PE集成软件

    1 我们首先集成Explorer.老外的BSExplorer比较好用,下载之后得到这些文件,不算太大.   2 这里需要注意,前一章讲解如何打造原生PE已经制作成了ISO,这里想要集成软件还需要回到刚 ...

  8. 【引用】python 静态函数 类函数 实例函数

    1.关于定义类的一些奇特之处  今天在Python中定义一个类,很奇怪,不需要事先声明它的成员变量吗?暂时不知,先记录下来: class Account(object):    "一个简单的 ...

  9. Php 中如何将内容写入log日志中

    $Str = '你想要存的内容'; file_put_contents('abc.log', "\r\n\r\n". $Str, FILE_APPEND);     FILE_AP ...

  10. Wamp访问缓慢、本地主机访问缓慢解决方案

    Wamp访问缓慢.本地主机访问缓慢解决方案 Wamp访问速度缓慢可能的原因:          1.一般原因: Wamp的日志文件太大.处理办法,将位于wamp/logs/下的日志文件清空.     ...