效果：

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Test</title>

    <style>

        *{margin:0px;padding:0px;list-style:none;}

        body{font-family:'Microsoft Yahei';}

        ul{margin-top:10px;}

        a,a:hover{text-decoration:none;}

        a{display:block;width:100px;padding-bottom:15px;

            height:20px;line-height:20px;text-align: center;

            font-size:14px;color:#000;transition:all .3s linear;

            position:relative;

        }

        a:hover{color:#f00;}

        a:after{

            content:'';

            display:block;

            width: 100%;

            overflow:hidden;

            height:19px;

            line-height:0px;

            border-bottom:1px solid red;

            position:absolute;

            left:0px;

            top:0px;

            transition:all .3s linear;

            transform:scaleX(0);

        }

        a:hover:after{

            transform:scaleX(.9);

        }

    </style>

</head>

<body>

    <ul>

        <li><a href="javascript:;">测试内容1</a></li>

        <li><a href="javascript:;">测试内容2</a></li>

        <li><a href="javascript:;">测试内容3</a></li>

        <li><a href="javascript:;">测试内容4</a></li>

        <li><a href="javascript:;">测试内容5</a></li>

    </ul>

</body>

</html>

使用CSS3对链接颜色与下划线进行优化的更多相关文章

  1. a标签鼠标经过，字颜色和下划线的颜色都变红

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 使用CSS去除 去掉超链接的下划线方法

    我们可以用CSS语法来控制超链接的形式.颜色变化,为什么链接一定要使用下划线和颜色区分呢? 其主要原因主要是考虑到   1.视力差的人 2.色盲的人 ... 下面我们做一个这样的链接:未被点击时超链接 ...

  3. 如何去掉a标签的下划线

    首先来了解下<a>标签的一些样式: <a>标签的伪类样式 一组专门的预定义的类称为伪类,主要用来处理超链接的状态.超链接文字的状态可以通过伪类选择符+样式规则来控制.伪类选择符 ...

  4. a标签下划线

    页面中有一处box中的a标签都被加上了下划线,查找元素却没有找到css中的underline. 原因是 <a>标签默认是有下划线的,而一般看到的<a>标签链接中的下划线都被覆盖 ...

  5. Android--去除EditText边框，加入下划线

    <span style="font-family: Arial, Helvetica, sans-serif;"><?xml version="1.0& ...

  6. android:为TextView加入样式——下划线，颜色，设置链接样式及前背景色

    实现下划线及颜色设置: public class AtActivity extends Activity { LinearLayout ll;     /** Called when the acti ...

  7. PowerPoint超链接字体颜色修改、怎么去掉超链接下划线

    经常在做PPT幻灯片时会遇到这样一个问题,给文字加超链接后发现链接的颜色是蓝色的,而且还带有下划线,这种效果与主题的色彩搭配简直是太影响美观效果了.有没有什么办法可以去掉PPT中的超链接下划线?再将超 ...

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

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

  9. 【转】Android TextView SpannableStringBuilder 图文混排颜色斜体粗体下划线删除线

    spannableStringBuilder 用法详解: SpannableString ss = new SpannableString("红色打电话斜体删除线绿色下划线图片:." ...

随机推荐

  1. 人人都是 DBA（I）SQL Server 体系结构

    在了解 SQL Server 数据库时,可以先从数据库的体系结构来观察.SQL Server 的体系结构中包含 4 个主要组成部分: 协议层(Protocols) 关系引擎(Relational En ...

  2. 源程序版本管理软件和项目管理软件，Github注册流程

    目前流行的源程序版本管理软件和项目管理软件:Microsoft TFS,Github,SVN,Coding 各自的优缺点: Microsoft TFS: 优点: tfs核心的,是对敏捷,msf,cmm ...

  3. mac安装redis

    1.到官网下载最新的redis. http://redis.io/download 2.将下载下来的tar.gz 压缩包,(在/Users/***/Downloads)拷贝到usr/local目录下 ...

  4. 使用protractor操作页面元素

    Protractor是为Angular JS应用量身打造的端到端测试框架.它可以真实的驱动浏览器,自动完成对web应用的测试.Protractor驱动浏览器使用的是WebDriver标准,所以使用起来 ...

  5. 跟我一起云计算（3）——hbase

    hbase HBase是一个分布式的.面向列的开源数据库,该技术来源于 Fay Chang 所撰写的Google论文“Bigtable:一个结构化数据的分布式存储系统”.就像Bigtable利用了Go ...

  6. Visual Studio 2015速递(1)——C#6.0新特性怎么用

    系列文章 Visual Studio 2015速递(1)——C#6.0新特性怎么用 Visual Studio 2015速递(2)——提升效率和质量(VS2015核心竞争力) Visual Studi ...

  7. IOS Animation-动画基础、深入

    1. Model Layer Tree(模型层树)和Presentation Layer Tree(表示层树) CALayer是动画产生的地方.当我们动画添加到Layer时,是不直接修改layer的属 ...

  8. 已经为类型参数“Chart”指定了 constraint 子句。必须在单个 where 子句中指定类型参数的所有约束

    public abstract class FillWorkBook<TModel, Chart> where TModel : struct where Chart : new() wh ...

  9. H5 调用摄像头

    WebRTC(Web Real-Time Communication,网页实时通信),是一个支持网页浏览器进行实时语音对话或视频对话的API. 1.getUserMedia 要播放摄像头的影像,首先需 ...

  10. cordova添加plugin

    cordova添加plugin #在线安装 cordova create chankoujie com.example.chankoujie ChanKouJie cordova plugin add ...