网站首页HTML/CSS
超链接下划线实现动画效果

<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>超链接下划线实现动画效果</title>
    <style>
        div {
            margin: 15px 0;
        }

        a {
            position: relative;
            color: #333;
            text-decoration: none;
            cursor: pointer;
        }

        /* 以下是核心代码 */
        .link:after {
            position: absolute;
            bottom: -7px;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right, #f00, #00f) no-repeat 100% 100%;
            background-size: 0 5px;
            content: "";
            transition: background-size .6s;
        }

        .link:hover:after {
            background-size: 100% 5px;
            background-position-x: left;
        }
    </style>
</head>
<body>
<div><a class="link" href="javascript:;">北国风光，千里冰封，万里雪飘。</a></div>
<div><a class="link" href="javascript:;">望长城内外，惟余莽莽；大河上下，顿失滔滔。</a></div>
<div><a class="link" href="javascript:;">山舞银蛇，原驰蜡象，欲与天公试比高。</a></div>
<div><a class="link" href="javascript:;">须晴日，看红装素裹，分外妖娆。</a></div>
<div><a class="link" href="javascript:;">江山如此多娇，引无数英雄竞折腰。</a></div>
<div><a class="link" href="javascript:;">惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</a></div>
<div><a class="link" href="javascript:;">一代天骄，成吉思汗，只识弯弓射大雕。</a></div>
<div><a class="link" href="javascript:;">俱往矣，数风流人物，还看今朝。</a></div>
</body>
</html>