效果：

代码：

<!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. ABP框架Web API跨域问题的解决方案

    ​1.在Web Api 项目下安装 Microsoft.AspNet.WebApi.Cors 包 Install-Package Microsoft.AspNet.WebApi.Cors 2.在Web ...

  2. 一个App完成入门篇（一）-从Hello world开始

    程序员学习新技术都是通过Hello World开始的,我们也不例外.第一课我们简单了解利用do平台开发App的基本流程,能了解到的知识点是: 开发环境搭建 创建开发者账号 新建项目 拖拽一个组件 修改 ...

  3. 分享一个U3D在Runtime显示碰撞盒的插件

    有些时候,我们需要在Game视图显示碰撞盒,比如格斗游戏我要开发碰撞配置的工具,我经常需要看到碰撞盒,今天找了一下,没有发现合适的插件,我还花5美金买了一个插件,结果也只是在scene视图显示,这里我 ...

  4. tr

    参照http://www.cnblogs.com/djcsch2001/archive/2011/05/08/2040255.html tr -options set1 [set2] ---- set ...

  5. java API：AtomicInteger

    An int value that may be updated atomically. See the java.util.concurrent.atomic package specificati ...

  6. 如何对Redis设置密码，提高安全性

    转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/93.html?1455871461 Redis​作为一个高速内存键值对(K ...

  7. Java-条件语句、循环语句练习

    题目一:一张纸的厚度大约是0.08mm,对折多少次之后能达到珠穆朗玛峰的高度(8848.13米)? double height=0.08; for(int i=1;i>0;i++) { heig ...

  8. Atitti usrQBf1801 翻页控件规范  v2

    Atitti usrQBf1801 翻页控件规范  v2 1. 参考api  参考easyui ,.net系列的1 1.1. 翻页流程  初始化翻页控件,以及绑定新页面event onSelectPa ...

  9. iOS开发备忘录：属性列表文件数据持久化

    属性列表文件是一种XML文件,Foundation框架中的数组和字典等都可以于属性列表文件相互转换. NSArray类常用读写属性列表文件的方法: +arrayWithContentsOfFile:类 ...

  10. iOS-----Xcode-Debug尝试

    在Xcode中,Debug时,不能像eclipse ,或VS那些集成开发那样,能直接查看变量的值.那怎么在调试的时候查看XCode的变量呢? 有一些方法的. 1.新建一个Single View App ...