css自定义a标签下划线动画效果

久伴
久伴
久伴
639
文章
534
评论
2020年4月17日13:52:32 2 449 407字阅读1分21秒

具体效果可以通过鼠标移动到本站文章中的超链接上面查看

鼠标移动到我查看效果

效果图演示

css自定义a标签下划线动画效果

HTML代码

<p>Lorem ipsum dolor <a class="fancy-link" href="#">sit amet ... beatae</a>, quo iure ... consequatur.</p>

CSS代码

   .fancy-link {
            text-decoration: none;
            background-image: linear-gradient(red, red);
            background-repeat: no-repeat;
            background-position: bottom left;
            background-size: 0 3px;
            transition: background-size 500ms ease-in-out;
        }

        .fancy-link:hover {
            background-size: 100% 3px;
        }
        a:hover {
            color:red;
        }
久伴
分享一下前端table表格自适应方案 HTML+CSS

分享一下前端table表格自适应方案

现在前端框架满天飞,bootstrap,mdui,meiziUI,element等等框架,使用框架自带的table类基本三二分钟就搞定一个自适应的table表格,但是实现的方案,大家了解吗 久伴在一次...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:2   其中:访客  1   博主  1
    • 自动售货机 自动售货机 1

      css懂的不多,这是CSS3还是 css2的用法?