CSS 偽元素有哪些不得了的用法？

請教除了常說的添加元素，加小標，清浮動之類的，還有哪些兇殘的實用技巧，比如在結構、性能提升、像什麼2d、3d轉換、一些不用圖片的特效等等，是不是可以運用到？另外大量使用偽元素有副作用嗎？

---

[contentEditable].empty:before {
position: absolute; /* Firefox 特別處理 */
content: attr(placeholder);
color: gray;
}


用此模擬原生 input[placeholder] 效果

---

所有偽元素能實現的，真實子元素都可以做到。

只不過有時候單純是為了樣式和布局就改變html結構，這樣的做法不幹凈，不值得提倡，所以才有了偽元素的市場。

我用偽元素繪製過印表機，拆開一半的信封等，也用它實現過非規整圖片輪廓。

不過這些真實子元素同樣可以做到，只不過沒有做到內容結構與樣式分離而已。

關於坑，就是你沒法通過dom操作直接操作偽元素。

---

補充一個，css3中偽元素content的attr十分有意思，例如文本為鏈接地址的超鏈接或者是a標籤的某個data項，用這個就不需要js去遍歷讀取然後插入了。

另外再說兩個最近遇到的坑：

1.IE8的偽元素不支持filter，想不通過背景圖片或多餘節點來實現兼容IE8的透明蒙層只能洗洗睡了……

2.極大量的低版本安卓手機默認瀏覽器和各類國產第三方瀏覽器，包括微信自帶的QQ瀏覽器內核webview，不支持偽元素的transition和animation，而且由於是偽元素，完全不能指望用js來方便的解決，所以如果遇到需要有動畫和過度效果的移動端頁面，還是老老實實用實元素比較好，雖然代碼看起來好臟不開心

---

有什麼不得了的，不就是多了一個原本不存在於DOM節點中的元素么，說白了，其實還是一個元素，跟多寫一個標籤的區別就是在於HTML中多了幾個字元和少了幾個字元而已。

---

額 其實我是覺得偽元素和普通的標籤沒什麼區別，要說真有什麼區別，我能想到的也就是只有存在一個標籤，才能存在該元素的偽元素，個人覺得偽元素僅僅是為了代碼簡化而產生的東西，所以，普通標籤能完成的樣式功能什麼的，偽元素都可以的。更甚者有可能，有些東西用偽元素來實現更簡單。

偽元素寫的一個list，請各位客官食用

RunJS

---

用來在不影響布局的情況下擴大元素的可點擊區域，具體怎麼做自己想想哦

---

無法回答的邀請該怎麼感謝。。編程至今能稱為黑魔法的我只在js里見過一次。。高端技巧倒還有一些。。

話歸正傳。。別忘了偽元素沒有dom就行了…其實自從用了js輸出html模板的前端mvc（或者反用web app的概念，稱為基於pjax的local web），偽元素我就不怎麼用了…好遺憾剛打算放棄ie67的強兼容而體會到一點偽元素的便利，讓html清爽了幾天…

說句實在話html和css終究是難以分割的，反正要一起改就沒研究「換皮膚」的技術了…

---

純CSS3掃雷 https://github.com/imsun/CSS-Minesweeper

---

不用JS或JQ實現tab標籤頁。

div{z-index:1}
div:target{z-index:2;}


清除浮動

div:before,div:after{
content:"";
display:table;
}
div:after{
clear:both;
}


添加動畫

div:before{
content:"";
animation: myanim .5s ease-in-out 0s infinite ;
}
div:after{
content:"";
animation: myanim .5s ease-in-out .5s infinite ;
}
@keyframes myanim {
from{xxxxxx;}
to{xxxxxxx;}
}


:after和:before配合@font-face來給文字添加矢量圖或者圖標。

---

【CSS進階】偽元素的妙用--單標籤之美

---

這有一個不錯的紙張陰影特效，用的：before ：after 可以看一下

CSS Box Shadows Effects

---

偽元素如果按普通元素來用 多半就做ui效果 保持html簡潔 沒有多餘樣式元素

個人覺得用content:; 讀html Attribute 很好用， 可以用偽元素做很多以前依賴js的效果 少寫代碼 很好用

至於兇殘的效果 和真實元素差不多 就沒什麼特別的

---

推薦閱讀：