用CSS的伪类实现对和叉号图表
2018-01-10 本文已影响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伪类的内容为"/",但显示时候为""。
问题:对伪类内容添加的位置