E:before/E::before

語法:

E:before/E::before { sRules }

說明:

設定在物件前(依據物件樹的邏輯結構)發生的內容。用來和content屬性一起使用,並且必須定義content屬性
  • CSS3將偽物件選擇符(Pseudo-Element Selectors)前面的單個冒號(:)修改為雙冒號(::)用以區別偽類選擇符(Pseudo-Classes Selectors),但以前的寫法仍然有效。

    即E:before可轉化為E::before

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
Selector IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 6.0-7.0 2.0-3.0 #2 4.0+ 3.1+ 15.0+ 3.2+ 2.1+ 18.0+
8.0+ 3.5+
::before 6.0-7.0 2.0-3.0 #2
8.0 #1 3.5+
9.0+
應用動畫 6.0-9.0 2.0-3.5 4.0-25.0 3.1-6.0 15.0+ 3.2-6.1 2.1-3.0 18.0-25.0
10.0+ #3 4.0+ 26.0+ 6.1+ 7.0+ 4.0+ 26.0+
  1. 本質上並不支援偽元素的雙冒號(::)寫法,而是忽略掉了其中的一個冒號,仍以單冒號來解析,所以等同變相支援了E::before。
  2. 不支援設定屬性position, float, list-style-*和一些display值,Firefox3.5開始取消這些限制。
  3. IE10在使用偽元素動畫有一個問題:

    例如:

    .test:hover {} .test:hover::before { /* 這時animation和transition才生效 */ }

    需要使用一個空的:hover來激活

示例: