before和 after偽元素的用法

今天在解決乙個當點選彈窗之後 整個背景應當是灰色的 介面  但是谷歌和ie瀏覽器 顯示的背景不一致  所以 就有了下文........

解決之後的背景效果：

body.a-active::after

常見偽類——:hover,:link,:active,:target,:not(),:focus。

常見偽元素——::first-letter,::first-line,::before,::after,::selection。

::before和::after下特有的content，用於在css渲染中向元素邏輯上的頭部或尾部新增內容。

這些新增不會出現在dom中，不會改變文件內容，不可複製，僅僅是在css渲染層加入。

所以不要用:before或:after展示有實際意義的內容，盡量使用它們顯示修飾性內容，例如圖示。

舉例

class="phonenumber">12345645654

::before和::after必須配合content屬性來使用，content用來定義插入的內容，content必須有值，至少是空。預設情況下，偽類元素的display是預設值inline，可以通過設定display:block來改變其顯示。

content可取以下值：

1、string

使用引號包一段字串，將會向元素內容中新增字串。如：a:after

平凡的世界

通過attr()呼叫當前元素的屬性，比如將alt提示文字或者鏈結的href位址顯示出來。

starof

用於引用**檔案。

舉例

---------------------------

舉例：比如乙個**

很巧妙的應用乙個div左border加圓角當機身，::before和::after配合圓角當聽筒。

效果如下：

經常用到給blockquote引用段新增巨大的引號作為背景，可以用 ：:before來代替background。好處是即可以給背景留下空間，還可以直接使用文字而非：

引用乙個段落,雙引號用::before偽元素實現

滑鼠移上去出現方括號

舉例：乙個標籤應用5張背景圖
乙個標籤應用了5張背景

效果如下：

偽元素 after和 before
after是乙個css偽元素，使用 after，你可以從css裡往頁面上新增內容 不再要在html裡有相應的東西 雖然最終生成的東西並不是真正的dom裡的內容，但這些內容能像普通內容一樣顯示，基本的效果是這樣的 div after 你好div before跟 after完全類似，只是它插入的內容會出...
偽元素 after和 before
after 是乙個css偽元素，使用 after 你可以從css裡往頁面上新增內容 不再要在html裡有相應的東西 雖然最終生成的東西並不是真正的dom裡的內容，但這些內容能像普通內容一樣顯示，基本的效果是這樣的 css div after html div 你好div before 跟 after...
偽元素 after和 before
after是乙個css偽元素，使用 after，你可以從css裡往頁面上新增內容 不再要在html裡有相應的東西 雖然最終生成的東西並不是真正的dom裡的內容，但這些內容能像普通內容一樣顯示，基本的效果是這樣的 div after 你好 before跟 after完全類似，只是它插入的內容會出現在其...