css伪元素实现选中效果【打勾效果】

css伪元素实现选中效果

.item{
      border: 1px solid #00a9ff;
      position: relative;

      &:after {
        position: absolute;
        content: '';
        width: 0px;
        height: 0px;
        top: 0px;
        right: 0px;
        border-top: 10px solid #00a9ff;
        border-bottom: 10px solid transparent;
        border-left: 10px solid transparent;
        border-right: 10px solid #00a9ff;
        z-index: 1;
      }

      &:before {
        position: absolute;
        content: '';
        width: 4px;
        height: 8px;
        transform: rotate(45deg);
        border-right: 2px solid #FFF;
        border-bottom: 2px solid #FFF;
        top: 0px;
        right: 3px;
        z-index: 2;
      }
    }

最后效果如下：

最后

以上就是明亮薯片为你收集整理的css伪元素实现选中效果【打勾效果】的全部内容，希望文章能够帮你解决css伪元素实现选中效果【打勾效果】所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。