效果：

代码：

<!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. Java中类继承、接口实现的一些细节（长期更新）

    前言 在Java中,子类继承父类,类实现接口是属于常识性的内容了,作为一个Java程序员应该也比较熟悉.不过子类继承父类,类实现接口中还是有一些小细节值得注意一下,本文就从个人工作.学习中入手,总结一 ...

  2. 设计模式之美：Memento（备忘录）

    索引 意图 结构 参与者 适用性 效果 相关模式 实现 实现方式(一):Memento 模式结构样式代码. 别名 Token 意图 在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这 ...

  3. ZooKeeper学习第一期---Zookeeper简单介绍

    一.分布式协调技术 在给大家介绍ZooKeeper之前先来给大家介绍一种技术——分布式协调技术.那么什么是分布式协调技术?那么我来告诉大家,其实分布式协调技术主要用来解决分布式环境当中多个进程之间的同 ...

  4. JavaScript开发原生App模式能否突出重围？

    移动应用制作的第三方服务市场已经被瓜分得差不多了,对于刚起步的中小企业来说,这些公司的 IT 部门人员比较熟悉的是 Appcan ,但随着互联网公司对 App 开发的需求持续升温,也有不少后来的闯入者 ...

  5. 利用IFormattable接口自动参数化Sql语句

    提要 string.Format("{0},{1}",a,b)的用法大家都不陌生了,在很多项目中都会发现很多sql语句存在这样拼接的问题,这种做法很多"懒"程序 ...

  6. JavaScript 数组详解

    在程序语言中数组的重要性不言而喻,JavaScript中数组也是最常使用的对象之一,数组是值的有序集合,由于弱类型的原因,JavaScript中数组十分灵活.强大,不像是Java等强类型高级语言数组只 ...

  7. Xamarin 技术全解析

    Xamarin 是一套基于C#语言的跨平台移动应用开发工具,今年2月份微软宣布收购Xamarin,而后在4月份进行的Build大会上微软宣布将会在各个版本的Visual Studio中免费提供Xama ...

  8. ejs模板中的四种表达式输出形式

    在ejs模板中,通常会用下面四种方式在HTML中输出服务端的变量或表达式的值: 1. 直接在<%%>中写表达式或变量.这种情况通常只是用来进行表达式计算或给变量赋值,不会有任何输出,被称作 ...

  9. 使用OData技术遇到的问题及解决办法

    “System.NotSupportedException”类型的未经处理的异常在 Microsoft.Data.Services.Client.dll 中发生 其他信息: 对此 POST 请求的响应 ...

  10. [Java面试一]面试复习大纲.

    一.Java基础部分 (搞定所有技术之后才考虑复习的技术点) 1.数组中的排序问题(笔试或者机试,前者可能性更大) 2.面向对象的理解 3.集合相关的问题,比如hashmap跟hashtable的区别 ...