用css3做一个关闭icon,

html代码:

<div class="nav-icon">
       <div>合作机构授权<span class="close"></span></div>
</div>

css3代码:

.nav-icon{
        position: relative;
        padding: 24px 0;
        background:#ffffff;
        width: 100%;
        font-family: PingFangSC-Regular;
        font-size: 18px;
        color: rgba(0,0,0,0.75);
        letter-spacing: 0;
        text-align: center;
    }
    .close {
       position: absolute;
       right: 10px;
       line-height: 20px;
       font-size: 30px;
       color: #C0C0C0;
    }
    .close::before {
        content: "\00D7";
    }

对于按钮中的叉按钮,用的是Unicode中的一种标识,以下这些也可以使用,标识 编码(16进制) Name 

✖ \2716 粗体乘法 
✗ \2717 交叉 
✘ \2718 粗体交叉 
× \00D7 乘法符号 
⨯ \2A2F 向量乘积 
x \78 小写字母 
X \58 大写字母

效果:

猜你喜欢

转载自www.cnblogs.com/liuyinlei/p/9065920.html