效果：

代码：

<!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. 细心很重要---猜猜这个SQL执行的什么意思

    今天在帮客户做语句优化的时候,突然遇到这样一个语句,类似下面的例子(原语句是个update) 例子中使用AdventureWorks数据中的两个表. productID 是[Production].[ ...

  2. 一致性hash的理解

    参考: http://www.blogjava.net/hello-yun/archive/2012/10/10/389289.html http://blog.csdn.net/cywosp/art ...

  3. Java多线程6：synchronized锁定类方法、volatile关键字及其他

    同步静态方法 synchronized还可以应用在静态方法上,如果这么写,则代表的是对当前.java文件对应的Class类加锁.看一下例子,注意一下printC()并不是一个静态方法: public ...

  4. 浅析SQL Server实现分布式事务的两阶段提交协议2PC

    不久之前团队有个新人问我一个很重要的web服务接口如何保证事务的问题.因为涉及到跨库事务,当时我只是回答目前我们的SOA框架都不支持跨库事务.然后就问到了数据库跨库事务是如何实现的,我只能凭印象含糊回 ...

  5. HTML、CSS部分

    要点:对Web标准的理解.浏览器差异.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端开发 技术等 1.Doctype作用? 严格模式与混杂模式-如何触发这两种模式,区分 ...

  6. 为什么eclipse中启动tomcat后，浏览器中出现404?

    问题描述: tomcat压缩包加压后,启动lib文件夹下面的startup.bat,在浏览器中输入http://localhost:8080/后出现熟悉的界面. 但是在eclipse中,jsp可以正常 ...

  7. Nodejs·理解Buffer

    Node里面的Buffer其实就是用于网络请求.文件读取等等操作,而且是分配在堆外,不会占用堆内的内存,这也是因为本来V8的内存就很小,如果读取大文件,那就...... 之前有看过Logstash的B ...

  8. 基于 flow.ci 实现 PHP 项目自动化持续集成

    高效程序员的习惯之一--让开发流程自动化.Automating shapes smarter future. 这是一个关于如何快速实现 PHP 项目自动化持续集成的快速指导.无论你是否使用过持续集成, ...

  9. 每天一个linux命令（22）：find 命令的参数详解

    find一些常用参数的一些常用实例和一些具体用法和注意事项. 1．使用name选项: 文件名选项是find命令最常用的选项,要么单独使用该选项,要么和其他选项一起使用.  可以使用某种文件名模式来匹配 ...

  10. js在控件原有的事件方法中加入自己的方法

    有没有碰到过这样的情况,在一个别人的页面上,你想为某个按钮加入自己的控制逻辑,满足条件的情况下才执行原有的事件方法呢? 这个时候在不能修改其原有方法的情况下,先获取控件的事件方法,并将其包装到自己的控 ...