怎樣理解 CSS :after 偽元素的作用？

如果只是在後面顯示點東西那倒不錯了：http://www.w3school.com.cn/css/pr_pseudo_after.asp

可是居然還被用來製作三角形，到底是怎麼做到的？http://dabblet.com/gist/1592060

---

作用主要是利用偽元素裝飾內容 (無論是裝飾圖片還是音效) 而不需要更改 HTML 的內容，從而幫助內容與樣式更好地分離。因為如果僅僅為了畫一個裝飾用的三角就在 HTML 里多加一個元素，這上對於實際內容來說其實是多餘的，對自動分析網頁的語義也可能會產生不好的影響 (這取決於分析程序的具體實現)。

---

應該說，::before 和 ::after 偽元素的初衷還是用於插入內容——不受文檔約束，也不影響文檔本身（比如，不影響 DOM），隻影響最終的樣式。

CSS 規範中給的例子很典型：p.note:before { content: "Note: " } ——這種插入的內容本身其實不是真正的內容，其實是身為文本的樣式，所以沒必要在 HTML 中重複出現，交給 CSS 來生成會很不錯。

不過目前最多見的應用情形的確是把它們用成 content: "" 這樣的空元素，然後給這個空元素加上各種樣式。這樣來說利用的就只是它這個元素的「存在」了（而非元素的內容），已經是討巧的 hacking 了。

---

補充一個應用：可以使用 content:attr(屬性名) 將其所屬元素的某個屬性的值添加到元素前/後。

比如將欄位名放入欄位值容器元素的某個屬性（比如 name），可以在不增加元素的情況（通常會在欄位前放上 label）下為欄位值輸出欄位名，而且可以實現自適應寬度的欄位名右對齊。

---

用兩個div+css畫出一個太極，其中有用到：after 哦

& .taiji{
position:relative;
left:100px;
top:100px;
width:100px;
height:100px;
background-color:#000;
border-radius:50%;
box-shadow: 0px 5px 2px #ccc;
}
.taiji:after{
content:"";
position:absolute;
top:50px;
display:block;
width:100px;
height:50px;
background-color:#fff;
border-radius:0 0 50px 50px;
z-index:0;
}
.liangyi{
position:absolute;
top:25px;
width:10px;
height:10px;
border:20px solid #000;
background-color:#fff;
border-radius:50%;
z-index:1;
}
.liangyi:after{
content:"";
position:absolute;
top:-20px;
left:30px;
width:10px;
height:10px;
border:20px solid #fff;
background-color:#000;
border-radius:50%;
}

&

&&&&

---

只要理解好 CSS 和 HTML 的關係就知道什麼時候用這個了。就像什麼時候用背景圖片什麼時候用 img 元素。

我見過的最典型的用處是幾個鏈接中間的豎線（http://hax.iteye.com/blog/111724）、圖片的倒影效果。

---

你可以直接把偽元素理解成一個元素

然後css可以對元素做的事，對這個偽元素都可以做，然後也不奇怪能做出個三角形了（三角形是用很寬的邊框+內容寬高都為0做出來的）

但是偽元素因為不在DOM里存在，也不會在調試工具里顯示，所以不太好調試

---

網頁分為結構層、樣式層和行為層；css樣式主要是用來裝修頁面的，所以我覺得凡是頁面裝修的元素都可以用偽元素來實現，上面的同學說的三角形、清除浮動、中間的豎線等等，我覺得都可以用偽元素來完成，而結構層專門來顯示頁面上傳遞的信息，順便處理下頁面的結構；

---

偽對象:after有一個很重要的用法--清除浮動。

這種清除浮動的方法幾乎成了一個固定的模式。很多大型網站裡面都有用到。

以下代碼：

.weibo-clearfix:after{clear:both;content:".";display:block;height:0;width:0;visibility:hidden;}

--摘自新浪網代碼。

---

推薦閱讀：