用CSS怎样实现选中显示对号角标的效果？

发布时间：2022-01-12 13:05 所属栏目：13 来源：互联网

导读：本文给大家分享的是用CSS实现选中显示对号角标的效果，这个效果还是比较实用的，很多场景能使用的，实现效果及代码如下，感兴趣的朋友可以参考，接下来我们就一起来了解看看吧。效果解析： 1、利用伪元素选择器，来增加内容。 2、利用较宽的border实现号的

本文给大家分享的是用CSS实现选中显示对号角标的效果，这个效果还是比较实用的，很多场景能使用的，实现效果及代码如下，感兴趣的朋友可以参考，接下来我们就一起来了解看看吧。

效果

解析：

    1、利用伪元素选择器，来增加内容。
    2、利用较宽的border实现√号的背景效果
    3、利用透明border去掉多余背景色。
    4、利用子绝父相定位，将√号定位到合适位置。

    css代码：

&.selected{
              color: @theme;
              border: 0.02rem solid @theme;
              position: relative;
              transition: all 0.5s ease;
            }
            &.selected::after {
              content: '';
              display: block;
              height: 0px;
              width: 0px;
              position: absolute;
              bottom: 0;
              right: 0;
              color:#fff;
              /**对号大小*/
              font-size: 10px;
              line-height: 8px;
              border: 10px solid;
              border-color: transparent #4884ff #4884ff transparent;
            }

（编辑：ASP站长网）