請舉例說明偽元素 (pseudo-elements) 有哪些用途？

王铁柱6發表於2024-11-25

偽元素在前端開發中用途廣泛，以下是一些常見的例子：

1. 樣式化特定內容:

  • ::before 和 ::after 可以用來插入生成的內容，例如圖示、計數器、引號等。

    .quote::before {
  content: open-quote;
}
.quote::after {
  content: close-quote;
}

  • ::first-letter 可以用來樣式化第一個字母，例如首字母放大。

    p::first-letter {
  font-size: 2em;
  float: left;
}

  • ::first-line 可以用來樣式化第一行文字，例如改變字型顏色。

    p::first-line {
  color: blue;
}

  • ::selection 可以用來樣式化使用者選中的文字。

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

2. 建立複雜的佈局效果:

  • ::before 和 ::after 結合絕對定位和內容屬性可以建立各種形狀，例如三角形、箭頭等，用於裝飾或指示方向。

    .arrow::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid black;
}

  • ::before 和 ::after 可以用來建立清除浮動的效果，避免父元素塌陷。 (雖然現在更推薦使用flexbox或grid，但理解這個技巧仍然有幫助)

    .clearfix::after {
  content: "";
  display: table;
  clear: both;
}

3. 改善使用者體驗:

  • ::placeholder 可以用來設定輸入框的佔位符文字樣式。

    input::placeholder {
  color: gray;
  font-style: italic;
}

  • ::marker 可以用來樣式化列表項的標記，例如改變顏色、形狀或使用自定義影像。

    li::marker {
  content: ">";
  color: red;
}

4. 配合計數器使用:

  • ::before 和 ::after 可以結合CSS計數器(counter-reset, counter-increment, counter() 函式)實現自動編號等功能。

總而言之，偽元素提供了一種強大的機制，可以用來在不改變HTML結構的情況下，對文件進行樣式化和新增內容，從而實現各種視覺效果和功能。 它們是前端開發中非常重要的工具。

相關文章