美文网首页
用CSS的伪类实现对和叉号图表

用CSS的伪类实现对和叉号图表

作者: 初漾流影 | 来源:发表于2018-01-10 16:34 被阅读0次

    对号的实现

    HTML样式如下:

    <span class="true"></span>
    

    CSS样式如下:

    .true {
        margin-right: 20px;
        display: inline-block;
        width: 8px;
        height: 4px;
        background: green;
        line-height: 0;
        font-size: 0;
        vertical-align: middle;
        transform: rotate(45deg);
    }
    .true:after { 
        content: '/';
        display: block;
        width: 18px;
        height: 4px;
        background: green;
    }
    

    测试:通过 绝对定位position: absolute;left: 11px;方式将伪类内容显示在页面上,方便测试。
    注意:after伪类的内容为"/",但显示时候为""。
    问题:对伪类内容添加的位置

    相关文章

      网友评论

          本文标题:用CSS的伪类实现对和叉号图表

          本文链接:https://www.haomeiwen.com/subject/dyvonxtx.html