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嘛，不要死扛~

行文倉促,若有錯誤,歡迎批評指正~~~