Pseudo elements? Pseudo classes? 這是啥米碗糕?

為 Interview Bit 的第 11 題。

Pseudo elements

介紹

當我們今天想要加入一個 icon 在一個按鈕的右邊，但是不想更改 HTML 時該怎麼辦? 這個時候我們可以使用 pseudo element，使用 CSS 的方法將 icon 加入到按鈕中。 pseudo elements 的中文叫做「偽元素」，為什麼用 「偽」，因為 pseudo elements 可以讓我們新增一個不在 HTML DOM 裡面的內容物。

使用時機

大部分是給部分指定的元素做樣式變化，但需特別注意無法使用在 <input> 上

語法

selector::pseudo-elements {
	property: value;
}

有些會看到 pseudo elements 使用一個 「:」，但其實2個冒號和1個冒號的意思是一樣的，不過在 CSS3 中， pseudo elements 前面使用 2 個冒號，pseudo classes 使用1個冒號。較容易區分 2 者差異。

其中最常用到的是 ::before，::after，這邊會各別說明。

::before

定義：在一個元素內容前面插入一些內容。

範例

<button class='btn btn-before'>Click me!</button>

.btn {
  padding: 10px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
}
  
.btn-before::before {
  content: "\f00c";
  font-family: FontAwesome; /*一定要加*/
  margin-right: 10px;
}

如果是使用 font-awesome icon，一定要加入 font-family: FontAwesome;，才會顯示 icon

debug 好久啊~~~

可以開 F12 看 ::before 到底是在哪裡?
是在 <button> 裡面，但是在 Click me! 的前面，不是在 <button> tag 前面

::after

定義：在一個元素內容後面插入一些內容。

<button class='btn btn-before'>Click me!</button>

.btn {
  padding: 10px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
}
  
.btn-after::after {
  content: "\f00c";
  font-family: FontAwesome;
  margin-left: 10px;
}

這邊我們一樣可以開 F12 看 ::after 到底是在哪裡?
是在 <button> 裡面，且在 Click me! 的後面，不是在 <button> tag 之後。

Pseudo classes

介紹

pseudo classes 的中文叫做「偽類」，是在某種狀況下，選擇一個元素所發生的變化。

pseudo classes 有非常多種，詳細都可以上 mdn web docs 參考。

這次範例來介紹簡單的 pseudo class，:hover。

:hover使用時機

今天當我滑鼠一滑到這一個連結時，我希望元素會變底色。這個時候，我們就可以使用其中一個 pseudo class，:hover。

CodePen範例

範例

<div>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Blog</a>
  <a href="#">Contact</a>
</div>

div {
  margin-top: 30px;
}

a {
  text-decoration: none;
  color: #000;
  padding: 10px;
}
/*當我滑鼠移到連結時，需要加的css*/
a:hover {
  /* 將背景色變成紅色 */
  background-color: red;
  /* 維持 padding 10px */
  padding: 10px;
  /* 將 border的弧度改成 20px */
  border-radius: 20px;
  /* 將文字顏色改為白色 */
  color: #fff;
}

參考資料：
CSS 伪类(Pseudo-classes)
mdn web docs - Pseudo-classes
mdn web docs - Pseudo-classes and pseudo-elements