after与before应用

最新推荐文章于 2020-12-30 21:36:43 发布

见面时的呼吸都曾反复练习

最新推荐文章于 2020-12-30 21:36:43 发布

阅读量400

点赞数

CC 4.0 BY-SA版权

分类专栏： css小技巧文章标签： cssafter小技 css-before

本文链接：https://blog.youkuaiyun.com/wstpa/article/details/50424810

css小技巧专栏收录该内容

4 篇文章

订阅专栏

本文深入分析了如何利用Bootstrap源码实现鼠标hover时的响应式边框效果，并通过CSS技巧在蓝色三角形中显示勾选图标。然而，这种实现存在IE7及以下浏览器的兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

看bootstrap源码还是可以学到很多知识啊。
实现效果
这里写图片描述

鼠标hover的时候，有个border，并且会在蓝色三角形中打钩，纯css实现，但是在ie7及以下不支持。

    .box li:hover {outline: 1px solid #0cf}
    .box li:after {
        position: absolute;
        display: block;
        border-top: 28px solid #4390df;  //三角形设置
        border-left: 28px solid transparent;
        right: 0;  //位置设置。记得li要设置相对定位
        top: 0;
        content: "";
        z-index: 101; 
    }
    .box li:hover:before {  //打钩实现，当这里设置为after时，则上面要换成before
        position: absolute;
        display: block;
        content: "√";
        color: #fff;
        font-size: 20px;
        right: 0;top: 0;
        z-index: 102;
    }