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

code_ds{ display: inline-block; position: relative; width:200px; height: 30px; text-align: center; line-height: 30px; font-size: 22px; background-color: #e0e0e0; color: #333; } code_ds: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; }

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

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>

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

声明：本文由w3h5原创，转载请注明出处：《利用css中的伪类 给元素设置特殊样式效果》 https://cloud.tencent.com/developer/article/1538422