3.11 關於 Pseudo Element

中譯常見是叫做「偽元素」，主要是用來調整一個元素裡的特定部份樣式。

語法

selector::pseudo-element {
  /* 相關 css */
}

注意：中間有兩個冒號，早期是用一個冒號，也可以。是在 CSS 3 之後，為了與 Pseudo Class 做區隔，所以 Pseudo Element 統一使用兩個冒號。然而為了相容於舊版本瀏覽器，使用一個冒號也是可以的。

第一行套用樣式

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

第一個字套用樣式

p::first-letter{
  font-size: 50px;
  color: black;
  border: 1px solid black;
}

列表當中的 li 標籤，有 ::marker。如下示意圖：

例：

選取後套用樣式

p.test::selection {
  color: red;
  background: yellow;
}

改變一般文字框上的 placeholder 樣式：

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

套用在元素的最一開始，新增了一個看不到的元素，可放入內容。

p.test::before {
  content: "abc";
}

如下示意圖：

例：

套用在元素的最後面，新增了一個看不到的元素，可放入內容。

p.test::after {
  content: "abc";
}

如下示意圖：

例：

Last updated 1 year ago