Benjamin - 专注前端开发和用户体验

再聊CSS伪元素

CSS(3) Benjamin 2160℃ 0评论

之前写过一篇“CSS伪类和伪元素的异同”的文章,里面详细描述了伪类与伪元素的区别以及一些常见应用。由于最近项目开发中,IE8浏览器下遇到一个bug,再聊伪元素。

我们知道随着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出现之前,对于设置列表序号样式比较有用;具体参见下面代码:

ol {
    counter-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);
    counter-increment: li;

    border-radius: 50%;
    background-color: #ccc;

    font-size: 12px;
    color: #efefee;
}

PS:我们不能设置content: “<h2>Benjamin</h2>”,它不会解析按HTML代码片段解析,而会解析为字符串;
5. content: attr(attrName)
content可以利用attr函数获取属性值,尤其使用在伪类中比较方便。见如下代码:

<style type="text/css">
    .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%;
    }
</style>
<ul class="list">
    <li data-index="1"><span>专注前端开发和用户体验</span></li>
    <li data-index="2"><span>专注前端开发和用户体验</span></li>
    <li data-index="3"><span>专注前端开发和用户体验</span></li>
    <li data-index="4"><span>专注前端开发和用户体验</span></li>
    <li data-index="5"><span>专注前端开发和用户体验</span></li>
</ul>

说了前面的话,下面说说IE中遇到的bug:
Bug描述:使用伪类实现”+”/”-“号图像切换时,通过增加和移除opened类来实现,但是在IE8中效果怪异,无法正确渲染,其它浏览器中正常:

.plus {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 20px;
    height: 20px;
    margin-right: 24px;
    border: 1px solid #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浏览器中效果没有达到预期,部分样式无法覆盖,现解决方案如下:

<div class="parent">
    <i class="plus"></i>
</div>
<script type="text/javascript">
$('.parent').on('click', function() {
    var $i = $(this).find('i'),
        className = $i.attr('class');

    className = /opened/.test(className) ? 'plus' : className +' opened';
    $i.replaceWith('<i class="'+ className +'""></i>');
});
</script>

暂时还么有发现更好的解决方案,求大神指点!

喜欢 (3)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址