通过css实现对勾（√）和叉号（×）

　

√

通过css实现对勾（√）和叉号（×）

第一种方式：

HTML：

 <span class="status correct"></span>
 <span class="status incorrect"></span>

CSS：

.correct {
    display: inline-block;
    width: 10px;
    height: 3px;
    background: #008100;
    line-height: 0;
    font-size: 0;
    vertical-align: middle;
    -webkit-transform: rotate(45deg);
}

.correct:after {
    content: '/';
    display: block;
    width: 20px;
    height: 3px;
    background: #008100;
    -webkit-transform: rotate(-90deg) translateY(-50%) translateX(50%);
}

这种方式不兼容ie

第二种方式：

CSS:

.correct:before {
    content: '\2714';
    color: #008100;
}
.incorrect:before {
    content: '\2716';
    color: #b20610;
}

第二种方式可以实现兼容ie

附CSS content常用特殊字符

相关阅读

CSS Hack是什么意思？css hack有什么用？

第一部分：什么是CSS Hack？ CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样

css3实现 slideUp/slideDown效果

1. 纯css3实现<h1><mark>PURE CSS</mark> Slide Up and Slide Down</h1> <input id="toggle" type="checkbox"><label for="toggl

真正的能理解CSS中的line-height，height与line-height

在最近的项目中，常常用到line-height，只是简单的理解为行高但并没有深层次的理解，致使不能达到信手拈来的感觉。在此做一下总结，一是

什么是div+css

什么是p+cssCSS（Cascading Style Sheet）中文译为层叠样式表。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言

小程序图标库----之用css画对号和icon图标

/*画√ */ /* .test2 { display: inline-block; width: 6px; height: 3px; background:#fff; line-height: 0; fon