偽元素

5.1 主要偽元素

CSS 中的偽元素允許開發人員添加樣式和內容到文檔中不可能被普通選擇器選中的部分。它們創建「虛擬」元素，可以像HTML標記一樣進行樣式設計。這是創建複雜佈局和改善網頁外觀的強大工具。

什麼是偽元素

偽元素是一種關鍵詞，添加到選擇器中，允許對元素的特定部分進行樣式設計。它們創建了虛擬元素，成為視覺設計的一部分，但不更改原始 HTML 標記。偽元素通常用於樣式化首字母、文本行、添加裝飾元素和其他任務。

主要偽元素

一些最常用的偽元素包括：

• ::before: 在所選元素的內容之前添加內容
• ::after: 在所選元素的內容之後添加內容
• ::first-letter: 樣式化元素的首字母
• ::first-line: 樣式化元素的首行
• ::selection: 樣式化用戶選中的文本

如何使用偽元素

CSS 中的偽元素使用雙冒號 (::) 標示，儘管一些偽元素也可能支援舊的單冒號表示法 (:) 以保持向後兼容。

語法：

    
      選擇器::偽元素 {
        屬性: 值;
        屬性: 值;
        屬性: 值;
        ...
      }
    
  

5.2 偽元素的使用範例

1. 添加裝飾元素

偽元素經常被用來在元素內容的前後添加裝飾元素：

    
      /* 在連結文本前添加圖標 */

      a::before {
        content: "🔗";
        margin-right: 5px;
      }

      /* 在段落後添加裝飾元素 */

      p::after {
        content: "❦";
        display: block;
        text-align: right;
        color: red;
      }
    
  

在這些範例中，偽元素 ::before 和 ::after 用於前添加圖標和後添加裝飾元素於段落。

2. 樣式化首字母和首行

偽元素可用於樣式化文本的首字母或首行，這經常應用於排版中：

    
      /* 樣式化段落的首字母 */

      p::first-letter {
        font-size: 2em;
        font-weight: bold;
        color: #3498db;
      }

      /* 樣式化段落的首行 */

      p::first-line {
        font-weight: bold;
        color: #e74c3c;
      }
    
  

在這些範例中，偽元素 ::first-letter 和 ::first-line 用於樣式化段落的首字母和首行。

3. 文本選擇高亮

偽元素 ::selection 用於樣式化被用戶選中的文本：

    
      /* 樣式化選中文本 */

      ::selection {
        background-color: #3498db;
        color: white;
      }
    
  

在這個範例中，被用戶選中的文本將會有藍色背景和白色文字。

5.3 偽元素的特性和限制

限制：

• 只能用一次：偽元素 ::before 和 ::after 在每個元素上只能使用一次
• 需要 content 屬性：偽元素 ::before 和 ::after 需要 content 屬性，即使它是空的
• 瀏覽器兼容性：現代瀏覽器支持雙冒號來標示偽元素，但對於舊的偽元素單冒號也可以使用

content 屬性使用範例

    
      /* 空偽元素用於內容以外 */

      div::before {
        content: "";
        display: block;
        width: 100%;
        height: 10px;
        background-color: #3498db;
      }
    
  

在這個範例中，空偽元素 ::before 用於在 div 內容之前添加裝飾條。