使用CSS3对链接颜色与下划线进行优化

效果：

  

代码：

<!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>

 

posted @ 2015-11-15 23:19  卷柏的花期  阅读(418)  评论(0)  编辑  收藏  举报