伪元素我们知道随着CSS规范进一步完善,新增的CSS伪元素越来越多,但是在日常开发中,我们常用的及浏览器支持情况比较乐观的当数before和after了。但是我们在日常开发中使用的都是:after {content: ”;}来清除浮动,及新增一个元素(照顾到IE8浏览器这里使用单冒号)。但是content的可取值有哪些呢?
1. 字符串: content: “a string”- 注意:特殊字符必须使用unicode编码;
2. 图片: content: url(/path/to/benjamin.png) – 图片以原始尺寸插入,不能调整大小。因图片支持渐变,因此可以对伪元素使用渐变效果;
3. 无字符: content: “”- 这个在清除浮动和设置背景图片比较有用,我们可以设置背景图片的width和height,甚至我们可以使用background-size属性来调整背景图片大小;
4. 计数器: content: counter(li)- 在:marker出现之前,对于设置列表序号样式比较有用;具体参见下面代码:
CSS Code复制内容到剪贴板
ol {
countercounter-reset: li;
}
ol>li {
position:relative;
padding-left: 2em;
line-height:30px;
list-style:none;
}
ol>li:before {
position:absolute;
top:8px;
left: 0;
height:16px;
width:16px;
line-height:16px;
text-align:center;
content:counter(li);
countercounter-increment: li;
border-radius: 50%;
background-color:#ccc;
font-size:12px;
color:#efefee;
}
PS:我们不能设置content: “
Benjamin
”,它不会解析按HTML代码片段解析,而会解析为字符串;5. content: attr(attrName)
content可以利用attr函数获取属性值,尤其使用在伪类中比较方便。见如下代码:
CSS Code复制内容到剪贴板
.list li {
list-style:none;
margin-bottom:20px;
}
.list li span {
vertical-align:middle;
}
.list li:before {
content:attr(data-index);
display:inline-block;
width:20px;
height:20px;
text-align:center;
color:#fff;
vertical-align:middle;
background-color:#f00;
border-radius: 50%;
}
- 专注前端开发和用户体验
- 专注前端开发和用户体验
- 专注前端开发和用户体验
- 专注前端开发和用户体验
- 专注前端开发和用户体验
说了前面的话,下面说说IE中遇到的bug:
Bug描述:使用伪类实现”+”/”-“号图像切换时,通过增加和移除opened类来实现,但是在IE8中效果怪异,无法正确渲染,其它浏览器中正常:
CSS Code复制内容到剪贴板
.plus {
position:relative;
display:inline-block;
vertical-align:top;
width:20px;
height:20px;
margin-right:24px;
border:1pxsolid#fdaa47;
border-radius:3px;
overflow:hidden;
}
/* 横向 */
.plus:before {
content:'';
position:absolute;
top:10px;
left:3px;
width:14px;
height:1px;
background-color:#fdaa47;
display:block;
}
/* 纵向 */
.plus:after {
display:block;
content:'';
width:1px;
height:14px;
background-color:#fdaa47;
position:absolute;
left:10px;
top:3px;
}
.opened:after {
top: -30px;
}
当通过addClass(‘opened’)和removeClass(‘opened’),来切换加减号时:IE8浏览器中效果没有达到预期,部分样式无法覆盖,现解决方案如下:
JavaScript Code复制内容到剪贴板