大家好，台嘎厚
今天中部依舊空氣品質糟糕，滿滿大PM2.5，是個適合還債的日子 (什麼鬼

今次來接續上次的題目 ── 使用偽元素來清除浮動

但首先我們必須要先知道

偽元素是什麼？為什麼我們需要它？

根據 W3School 簡單暴逆又其實不是那麼好懂的解說來看
「CSS 偽元素用於向某些選擇器設置特殊效果。」
..
... 嗯，很好，依然不懂這是什麼鬼 (扔書

別擔心，這是正常現象

這邊簡單說一下我自己的理解好了
偽元素的好處在於它本身可以有 CSS 屬性，故可以影響畫面
但是它不是實際存在的 HTML 結構

舉例來說
若我們希望製作一個這樣的按鈕

就可以使用偽元素來達成效果囉！

凡事有個範例好理解，本次 demo 歡迎取用把玩

在這個範例中，我們可以看到左側的 HTML 中只有一個 div 元素
但是畫面上卻有三種色彩，以及不同的內容
這就是因為使用了偽元素來製造畫面的緣故

紅色部分的 code

.button::before{
  content: '我是before';
  display: block;
  position: absolute;
  top: 0;
  left: -50px;
  width: 50px;
  height: 80px;
  background-color: red;
}

藍色部分的 code

.button::after{
  content: '我是after';
  display: block;
  position: absolute;
  top: 0;
  right: -50px;
  width: 50px;
  height: 80px;
  background-color: #03f4f1;
}

解釋時間

content: '';
display: block;

這兩個屬性是為了讓 ::before、::after 具有實際佔位，才能顯示
而比較陌生的 positon(定位元素) 則是為了讓偽元素在我們想要的地方出現
這個部分應該會在下次的主題中更詳細提到

回到原先使用偽元素來清除浮動的主題

若我們想要使用偽元素來清除浮動
則需要下以下的 code

想要被清除浮動的物件 or 其className::after{
  content: ""; 
  display: block; 
  height: 0; 
  visibility: hidden; 
  clear: both; 
}

這樣一來就大功告成囉！

補充資料

• CSS 偽元素(Pseudo-elements) - W3School
• CSS 偽元素 ( before 與 after )
• 偽元素的另類用法(:after、:before)
• CSS沒有極限 - 別忘了偽元素
• CSS-清除浮動
• CSS清除浮動各種方法

>>隊友任意門<<

• Jason 勇者Jason和前端之鑰
• Clover 用Vue與firebase開發訂便當系統實錄
• aflect 我的UI/UX奮鬥屎
• GG 一隻巨大的UI/UX菜鳥
• Jimmy ES666
• R-yin 菜鳥前端奮鬥史(欸?

我是小菜鳥阿陰，我們下次見！