效果：

代码：

<!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. Android 开发必备知识：我和 Gradle 有个约会

    腾讯Bugly特约作者:霍丙乾 0.讲个故事 0.1 Ant,我还真以为你是只蚂蚁 真正开始近距离接触编程其实是在2012年,年底的时候带我的大哥说,咱们这个 app 发布的时候手动构建耗时太久,研究 ...

  2. Win10 UWP应用发布流程

    简介 Win10 UWP应用作为和Win8.1 UAP应用不同的一种新应用形式,其上传至Windows应用商店的流程也有了一些改变. 这篇博文记录了我们发布一款Win10 UWP应用的基本流程,希望为 ...

  3. 设计模式之美：Role Object（角色对象）

    索引 意图 结构 参与者 适用性 效果 相关模式 实现 实现方式(一):Role Object 的示例实现. 意图 通过明确地附加角色对象到目标对象中,以使对象可以适配不同的客户需求.每个角色对象都代 ...

  4. WKInterfaceImage 无法更新图片的问题

    最近涉及到AppleWatch的相关项目,但有个奇怪问题无法解决,而且无法理解: 根据不同的用户操作,需要修改播放器的专辑图片. 不知道跟我的项目需求是不是有关系:我需要轮询共享空间,以拿取同步数据, ...

  5. (翻译)正确实施DevOps-The Lay of the Land

    原文地址:http://www.drdobbs.com/architecture-and-design/getting-devops-right-the-lay-of-the-land/2400626 ...

  6. TACACS.Net Group 配置

    Tacacs作为一个验证工具,其网站上资料较少,只有一些缺省配置,并且没有提到如果在应用中与其自带的Group功能做集成, 这里使用免费的windows 版的TACACS.net 作介绍http:// ...

  7. IoC组件Unity再续~根据类型字符串动态生产对象

    回到目录 这个根据类型字符串动态去生产一个接口的对象,在实现项目中用途很广,这即省去了配置config文件的麻烦,又使用生产对象变更可配置,你完全可以把这种多态持久化到数据库里或者XML文件里,在使用 ...

  8. vue隐藏APP启动时显示的{{}}

    vue隐藏APP启动时显示的{{}} vue组件在编译好之前会显示{{msg}},在官网上找到这个

  9. SQLSERVER中的ALLOCATION SCAN和RANGE SCAN

    SQLSERVER中的ALLOCATION SCAN和RANGE SCAN 写这篇文章的开始,我还不知道ALLOCATION SCAN的工作原理是怎样的,网上资料少得可怜 求助了园子里的某位大侠,他看 ...

  10. 汇编程序的Hello world

    原文链接:http://www.orlion.ga/989/ 一.汇编程序的Hello world x86 AT&T: .data   msg:       .ascii "Hell ...