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

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. uVa 12563 Jin Ge Jin Qu

    分析可知,虽然t<109,但是总曲目时间大于t,实际上t不会超过180*n+678.此问题涉及到两个目标信息,首先要求曲目数量最多,在此基础上要求所唱的时间尽量长.可以定义 状态dp[i][j] ...

  2. 设计模式之桥接模式（php实现）

    github地址:https://github.com/ZQCard/design_pattern /** * 桥接模式 * 优点: * 1.分离抽象接口及其实现部分.提高了比继承更好的解决方案. * ...

  3. selenium 截图

    http://blog.csdn.net/u010953692/article/details/78320025 # coding:utf-8 # coding:cp936 from selenium ...

  4. Java HashMap工作原理深入探讨

    大部分Java开发者都在使用Map,特别是HashMap.HashMap是一种简单但强大的方式去存储和获取数据.但有多少开发者知道HashMap内部如何工作呢?几天前,我阅读了java.util.Ha ...

  5. elasticsearch升级步骤

    ES从1.2.1升级到1.4.0 升级步骤,基本上是按照官网的叙述来完成的,链接是:http://www.elasticsearch.org/guide/en/elasticsearch/refere ...

  6. [WCF菜鸟]什么是WCF

    一.概述 Windows Communication Foundation(WCF)是由微软发展的一组数据通信的应用程序开发接口,可以翻译为Windows通讯接口,它是.NET框架的一部分.由 .NE ...

  7. linux 设置时间

    1.图形界面里面点击右上角的 “时间” 2.设置,edit 找到china G8区 date发现还没有生效 3.reboot 重启才生效了

  8. 解密和解压浏览器上加密的js文件

    F12 -> 进入Sources -> 找到任意一个加密的js文件,如图 点击最下方的 {} 即可解压

  9. Struts2学习之拦截器

    © 版权声明:本文为博主原创文章,转载请注明出处 拦截器: - Struts2大多数核心功能都是通过拦截器实现的,每个拦截器完成某项功能 - 拦截器方法在Action执行之前或之后执行 工作原理: - ...

  10. 什么是gcd

    概述 我将分四步来带大家研究研究程序的并发计算. 第一步是主要的串行程序,然后使用GCD把它并行计算化.假设你想顺着步骤来尝试这些程序的话,能够下载源代码. 注意.别执行imagegcd2.m,这是个 ...