之前做乙個需求的時候需要對頁面上所有的banner上新增提示文案，例如：這是廣告。本來想乙個乙個廣告部件上新增文案div來實現。
後面向同組大佬請教，可以利用css中的偽元素:before來實現。
偽元素，顧名思義，就是它們不是真的html頁面元素，實際上就乙個帶有css樣式的透明元素，只展示某些css效果，不在dom結構裡面顯示。
對於新增banner頭部的提示文案，使用偽元素是最佳方案。
由於banner大多數都是google上的廣告，廣告div的id具有一定規律，於是寫下如下css**：
[id*=div-gpt-ad-]>div:before後面遇到乙個小問題，就是有一些尺寸是1x1的banner也顯示了「廣告」文案，顯得非常突兀。這個時候可以使用:not來排除這些id，改動的css如下：
[id*=div-gpt-ad-]:not(div-gpt-ad-232423423)>div:before[id*=div-gpt-ad-]:not(div-gpt-ad-232423423):not(dig-gpt-ad-223245555)>div:before {css之偽元素
其他w3school文件 css 偽元素用於向某些選擇器設定特殊效果。我們看到有幾個偽元素的使用例子 可以通過這個屬性設定文字第一行的特殊效果，比如一段文字的第一行為紅色，其他為黑色。如果不通過這個方式來實現，就比較麻煩。因為螢幕適配的原因，你可能不能確定哪些文字屬於第一行 和first line ...
css偽類，偽元素
偽類作用於整個元素，比如 a link a hover div first child 儘管這些條件都不是基於dom的，但結果沒乙個都是作用於乙個完整的元素，比如整個鏈結，段落，div等等 偽元素作用於元素一部分，比如 p first line p first letter 偽元素作用於元素的一部分...
CSS偽類 偽元素
css偽類用於向某些選擇器新增特殊的效果。錨偽類a link 未訪問的鏈結 a visited 已訪問的鏈結 a hover 滑鼠移動到鏈結上 a active 選定的鏈結 注意 1 在 css 定義中，a hover 必須被置於 a link 和 a visited 之後，才是有效的。2 在 cs...