CSS 伪元素 使用参考

伪元素能够作得事情是很是多的，详情你们能够参考这里 大放异彩的伪元素——能够作什么？

本篇主要讲两个伪元素:before和:after的几个要点：

一、:before和:after是加在元素的里面，也就是在元素里的最前面和最后面加一个伪元素，看图：

代码：

* {
    margin:0;
    padding:0;
}
.par {
    width: 200px;
    height: 50px;
    padding: 20px;
    border: 1px solid grey;
}
.par:before {
    content:':before';
    background-color: lightgreen;
}
.par:after {
    content:':after';
    background-color: lightblue;
}

HTML:

<div class="par">  
    <span>hello</span>
    <span> world</span>
</div>

二、伪元素必需要设置content属性，没有内容能够设置为content:'',不然伪元素不起做用，不信你把前面例子的content属性注释掉？？？

---

三、伪元素默认是内联（行内）元素，因此设置宽高是没有用的，固然加上了display:block固然就能够设置宽高了，可是由于是块状元素天然也就独占一行了，还想再同一行作块状元素？display:inline-block;

---

四、不是全部元素均可以加伪元素的，像input，textarea 就不行，有的浏览器还不支持img和select

---

五、IE8 没法在伪元素上设置透明度！虽然网上流传了各类版本的IE filter:alpha(opacity=0.5) ，可是本人亲测不行，最后仍是在stackoverflow上找到了答案，详情能够点击这里 Is there a way to make IE8 honour opacity on an `:before` pseudo element?

---

六、伪元素不行，直接在先后加 span嘛，不要死扛~

行文仓促,若有错误,欢迎批评指正~~~