√
通过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样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样
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,只是简单的理解为行高但并没有深层次的理解,致使不能达到信手拈来的感觉。在此做一下总结,一是
什么是p+cssCSS(Cascading Style Sheet)中文译为层叠样式表。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言
/*画√ */ /* .test2 { display: inline-block; width: 6px; height: 3px; background:#fff; line-height: 0; fon