利用css中的伪类 给元素设置特殊样式效果

最近在看一篇文章，网站中有一个图标，鼠标划上去会出现一个彩色的小边，非常有趣。效果如下：

www.w3h5.com

查看代码发现标签上有一个:hover，鼠标划入时添加一个:after伪类，给这个伪类设置背景渐变、绝对定位和高度，实现了这种“炫酷”的效果。

html部分代码：

<code>
    www.w3h5.com
</code>

样式部分代码：

<style>
    code{
        display: inline-block;
        position: relative;
        width:100px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        background-color: #e0e0e0;
        color: #333;
    }
    code:hover:after{
        background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #b10dc9), color-stop(16.66667%, #ff4136), color-stop(33.33333%, #ff851b), color-stop(50%, #ffdc00), color-stop(66.66667%, #2ecc40), color-stop(83.33333%, #0074d9), color-stop(100%, #b10dc9));
        background-image: -webkit-linear-gradient(left, #b10dc9, #ff4136, #ff851b, #ffdc00, #2ecc40, #0074d9, #b10dc9);
        background-image: -moz-linear-gradient(left, #b10dc9, #ff4136, #ff851b, #ffdc00, #2ecc40, #0074d9, #b10dc9);
        background-image: -o-linear-gradient(left, #b10dc9, #ff4136, #ff851b, #ffdc00, #2ecc40, #0074d9, #b10dc9);
        background-image: linear-gradient(left, #b10dc9, #ff4136, #ff851b, #ffdc00, #2ecc40, #0074d9, #b10dc9);
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 2px;
    }
</style>

怎么样？是不是很好玩呢？

推荐阅读：

利用css中的伪类 给元素设置特殊样式效果

使用float后清除浮动的几种方法

JavaScript、Jquery获取屏幕的宽度和高度

宝塔面板 IIS10 利用web.config文件强制HTTPS跳转

点击a页面链接跳转b页面某个tab切换的实现