css偽元素:after和 :before 存在的意義？

01-07

:before
在元素之前添加內容。

:after
在元素之後添加內容。

CSS 是用來表現的，HTML 一切非正文的、裝飾性的東西理論上都是要用 CSS 來實現的。

比如背景圖片，比如小圖標等。而輔助性的文字，比如：XXXXXX[new] 我們可以認為 [new] 是輔助性的裝飾性的內容，它不應該寫進 HTML 而影響真正的內容。所以就得用盡量用

.new-item:after{

content: "[new]";

}

來表示。

使得html更加語義化。有些時候，為了某些特定的展現，不得不添加用於輔助布局的無意義html元素，這兩個偽元素能實際起到這種輔助布局的作用，而又不增加無意義純布局html元素，所以html就更簡潔更純粹了。

從這個角度看，css的純粹語義化確實是沒有意義的，純粹語義的只會有html。

此外，僅僅這兩個偽元素是一定不能解決問題的，所以還有first-child跟last-child這種，當然還有人搞笑寫second-child的，不過你怎麼知道將來就不會有。。。也許還有father和grandpa呢

清除浮動妥妥的

個人認為這倆偽類實在是不合時宜，它們不應該出現在css里。

本來css應該乾的是表現上的事，結果這倆偽類幹了結構上的事，當然，其實主要是content屬性乾的，不過大家都是在這倆偽類里用。

當然，為了html中不出現不相干的代碼，大家把它們寫在css中，可是那些為了實現結構或者清除浮動的代碼真的就不該屬於html的一部分么。

這倆偽元素，幾年前至今我用他做閉合浮動

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; } .clearfix { *zoom:1; }

或者更進一步

.clearfix:before, .clearfix:after { content: "."; display: block; height: 0; visibility: hidden; } .clearfix:after {clear: both;} .clearfix {zoom: 1;} /* IE &< 8 */

這兩年結合css3還用來做翹邊陰影和曲邊陰影，幾分鐘前剛給一個微商店做了一個h5的網站，登陸界面大量這種效果。。。

在不更改html的結構下，能通過css在html元素里添加兩個新的元素。

例如結構 &內容&，如果沒有:after :before，那這個結構永遠只能是這樣，但使用了這兩個偽類，就不一樣了，結構就能變成了&&before&內容&after&&，瞬間就能把定死的結構靈活化了。

你要做遮罩，只需要:before處理；需要背景，只需要:after處理；當然還有在前面加個字體什麼，後面加個特效都是可以處理的。完全可以把偽類當成一個新元素處理，不過要記住一點，在偽類里一定要加上{ context:"內容，也可為空"; }

:after和 :before 的存在是很有意義了，我都有種相見恨晚的感覺，它可以在標籤前後添加自定義的內容，比如icon啊，小圖標啊，小文字什麼的，實在是很有用！！！真心是好東西，想到了一個成語：暴殄天物！！！

最近學到的是利用before和after製作翹邊陰影和曲邊陰影，效果驚艷。此外我個人覺得before和after可以在特殊情況下添加一些特殊的效果而不破壞原網頁的整體結構，比如階段推廣在某圖片上加一些特殊的字或內容....新手，大神勿噴。

clearfix

blockquote的引號