CSS入門-Day10：偽元素

浴火重生的雞

發佈於10天快速學習系列

更新於 2024/08/08發佈於 2024/08/08閱讀時間約 5 分鐘

偽元素介紹

偽元素（Pseudo-elements）是一種特殊的 CSS 選擇器，用於選擇和樣式化文檔中特定部分的內容。與偽類不同，偽元素可以創建和樣式化文檔中並不存在的元素。

常見偽元素

`::before`

::before 偽元素在選擇器的內容之前插入內容。通常與 content 屬性配合使用。

p::before {
  content: "Before: ";
  color: blue;
}

`::after`

::after 偽元素在選擇器的內容之後插入內容。同樣需要配合 content 屬性使用。

p::after {
  content: " After";
  color: red;
}

`::first-line`

::first-line 偽元素樣式化選擇器的第一行文字。

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

`::first-letter`

::first-letter 偽元素樣式化選擇器的第一個字母。

p::first-letter {
  font-size: 2em;
  color: orange;
}

`::selection`

::selection 偽元素樣式化用戶選取的文本部分。

::selection {
  background: yellow;
  color: black;
}

偽元素實踐

我們將通過一些示例來實踐偽元素的基本用法。

示例

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>偽元素示例</title>
  <style>
    .example::before {
      content: "★ ";
      color: blue;
    }
    .example::after {
      content: " ★";
      color: red;
    }
    .example::first-line {
      font-weight: bold;
      color: green;
    }
    .example::first-letter {
      font-size: 2em;
      color: orange;
    }
    ::selection {
      background: yellow;
      color: black;
    }
  </style>
</head>
<body>
  <p class="example">這是一個示例段落，用於展示偽元素的基本用法。</p>
</body>
</html>

在這個例子中，.example 段落應用了一些偽元素樣式：

使用 ::before 和 ::after 在段落內容前後插入星號。
使用 ::first-line 樣式化段落的第一行文字。
使用 ::first-letter 樣式化段落的第一個字母。
使用 ::selection 樣式化用戶選取的文本部分。

高級偽元素用法

除了基本用法，偽元素還可以用於一些高級的排版和樣式設計。例如，創建自定義引號、實現複雜的圖形效果等。

自定義引號

blockquote::before {
  content: open-quote;
  font-size: 2em;
  color: gray;
  vertical-align: -0.4em;
}
blockquote::after {
  content: close-quote;
  font-size: 2em;
  color: gray;
  vertical-align: -0.4em;
}

複雜圖形效果

.button {
  position: relative;
  padding: 10px 20px;
  border: 2px solid #3498db;
  color: #3498db;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  font-weight: bold;
  transition: all 0.3s ease;
}
.button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #3498db;
  z-index: -1;
  transition: all 0.3s ease;
  transform: scaleX(0);
  transform-origin: right;
}
.button:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}
.button:hover {
  color: #fff;
}