建站
咨詢
售后
建站咨詢
新聞中心
10年積累的做網站、成都網站建設經驗，可以快速應對客戶對網站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網絡服務。我雖然不認識你，你也不認識我。但先網站設計后付款的網站建設流程，更有夷陵免費網站建設讓你可以放心的選擇與我們合作。
在 CSS1 和 CSS2 中，偽元素的使用與偽類相同，都是使一個冒號
:與選擇器相連。但在 CSS3 中，將偽元素單冒號的使用方法改為了使用雙冒號
::，以此來區(qū)分偽類和偽元素。因此，建議在使用偽元素時使用雙冒號而不是單冒號。
selector::pseudo-element {
property: value;
}
其中，selector 為選擇器，pseudo-element 為偽元素的名稱，property 為 CSS 中的屬性，value 為屬性對應的值。
注意：一個選擇器中只能使用一個偽元素，而且偽元素必須緊跟在選擇器之后。按照最新的 W3C 規(guī)范，在定義偽元素時您應該使用雙冒號::而不是單個冒號:，以便區(qū)分偽類和偽元素。但由于舊版本的 W3C 規(guī)范并未對此進行特別區(qū)分，因此目前絕大多數(shù)的瀏覽器都同時支持使用單冒號和雙冒號兩種方式來定義偽元素。
CSS 中提供了一系列的偽元素，如下表所示：
| 偽元素 | 例子 | 例子描述 |
|---|---|---|
| ::after | p::after | 在每個 元素之后插入內容 |
| ::before | p::before | 在每個 元素之前插入內容 |
| ::first-letter | p::first-letter | 匹配每個 元素中內容的首字母 |
| ::first-line | p::first-line | 匹配每個 元素中內容的首行 |
| ::selection | p::selection | 匹配用戶選擇的元素部分 |
| ::placeholder | input::placeholder | 匹配每個表單輸入框（例如 ）的 placeholder 屬性 |
1. ::after
偽元素 ::after 能夠在指定元素的后面插入一些內容，在 ::after 中需要使用 content 屬性來定義要追加的內容，而且在 ::after 中必須定義 content 屬性才會生效（沒有需要插入的內容時可以將 content 屬性的值定義為空
""）。
下面通過一個示例來演示偽元素 ::after 的使用：
偽元素 ::after
偽元素 ::after
偽元素 ::after
運行結果如下圖所示：
圖：偽元素 ::after 的使用
2. ::before
偽元素 ::before 能夠在指定元素的前面插入一些內容。與 ::after 相似，::before 中也需要使用 content 屬性來定義要追加的內容，而且在 ::before 中必須定義 content 屬性才會生效（沒有需要插入的內容時可以將 content 屬性的值定義為空
""）。
下面通過一個示例來演示偽元素 ::before 的使用：
偽元素 ::before
偽元素 ::before
偽元素 ::before
運行結果如下圖所示：
圖：偽元素 ::before 的使用
3. ::first-letter
偽元素 ::first-letter 用來設置指定元素中內容第一個字符的樣式，通常用來配合 font-size 和 float 屬性制作首字下沉效果。需要注意的是，偽元素 ::first-letter 僅可以用于塊級元素，行內元素想要使用該偽元素，則需要先將其轉換為塊級元素。
下面通過示例來演示偽元素 ::first-letter 的使用：
偽元素 ::first-letter
運行結果如下圖所示：
圖：偽元素 ::first-letter 的使用
4. ::first-line
偽元素 ::first-line 用來設置指定元素中內容第一行的樣式，與 ::first-letter 類似，偽元素 ::first-line 也僅可以用于塊級元素，行內元素想要使用該偽元素，則需要先將其轉換為塊級元素。
下面通過示例來演示偽元素 ::first-line 的使用：
偽元素 ::first-line 用來設置指定元素中內容第一行的樣式，與 ::first-letter 類似，偽元素 ::first-line 也僅可以用于塊級元素，行內元素想要使用該偽元素，則需要先將其轉換為塊級元素。
運行結果如下圖所示：
圖：偽元素 ::first-line 的使用
5. ::selection
偽元素 ::selection 用來設置對象被選中時的樣式，需要注意的是，偽元素 ::selection 中只能定義元素被選中時的 color、background、cursor、outline 以及 text-shadow（IE11 尚不支持定義該屬性）等屬性。
下面通過示例來演示偽元素 ::selection 的使用：
偽元素 ::selection 用來設置對象被選中時的樣式，需要注意的是，偽元素 ::selection 中只能定義元素被選中時的 color、background、cursor、outline 以及 text-shadow（IE11 尚不支持定義該屬性）等屬性。
運行結果如下圖所示：
圖：偽元素 ::selection 的使用
6. ::placeholder
偽元素 ::placeholder 用來設置表單元素（、