全国服务热线:4008-888-888

技术知识

纯CSS完成选定产☀品后右下方显示信息√号作用

强烈推荐文章内容:

css伪类 右下方点一下出現 对号角声标表明选定的实例编码 https://www.jb51.net/css/731762.html

实际效果

分析:

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;
            }

小结

到此这篇有关纯CSS完成选定产品后右下方显示信息√号作用的文章内容就详细介绍到这了,大量有关css 选定产品右下方显示信息√号內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服