[CSS]偽元素使用功略

Photo by Rahul Joshi on rjdesignz

此文章主要是討論偽元素 :before :after 如何靈活運用，來減少 Tag 的使用，並可利用偽元素來解決排版的問題、使用者的互動及製作特殊形狀等。

CSS 偽元素
引入文檔以外的訊息，或是一般的選擇器無法表達的訊息 （意思就是創造一個假的元素

CSS3 規定將偽類與偽元素區隔開來，因此規定偽元素使用「雙冒號」，但因 after、before 是在CSS2就已經存在因此單/雙都可使用。

以下依序介紹各個偽元素的使用方法：

• first-letter
  為了引導使用者閱讀動線，會刻意將第一個字放大，而通常為了達到此效果會在第一個字另外包一層span，而frst-letter就是可以讓我們省下這個步驟，直接對第一個做CSS的修正，就可以做出類似雜誌排版的效果。 (作用於 display:block inline-block的元素)

• first-line
  相同道理我們也可以運用first-line來對第一行的文字添加CSS。(僅作用於 display:block inline-block的元素)。

• selection
  簡單說就是選取一段文字的效果。

以上三種效果的範例(點我)

• after/ before
  因兩種的使用方法相同所以一起介紹，表示在元素的前/後方再加入內容，所以等同於一個元素有三個元素可以去靈活運用，after/ before同時也會繼承原來元素的屬性，也是目前最常用到的偽元素，以下為常運用技巧：

基本用法
要特別注意的是一定要加上content 這樣才會顯示的出來。以下為範例：

會顯示以下

再來我們要來介紹 after/ before 的 7種用法

1. 解決float排版高度消失的問題(清除浮動)
2. 使用偽元素:before和:after給照片添加陰影
3. 背景旋轉變形時，裡面內容文字不跟著旋轉
4. 製作對話框樣式
5. 清單項目符號設計
6. 製作hover線段滑出效果
7. 使用偽元素:before和:after製作照片堆疊效果

先附上在 codepen 的範例連結，有興趣看說明的就繼續往下囉😆

用法1. 解決float排版高度消失的問題(清除浮動)
在CSS3 flex出現前，大家都是用float來排版，最常遇到的問題就是父元素的高度消失，因此我們可以藉由after來讓父元素偵測到高度。

增加之後

用法2. 使用偽元素:before和:after給照片添加陰影
利用偽元素就可以製作兩側的陰影

用法3. 背景旋轉變形時，裡面內容文字不跟著旋轉
在製作矩形以外的形狀需要用到 CSS 變形或著做 hover 效果時，裡面的子元素會也會跟著父元素變形，文字就會被扭曲旋轉，因此我們可以將背景製作在偽元素上，並對它做 CSS 效果，如此一來就不會影響到子元素

範例1. 菱形

假設我們直接對 div 做 transform 會造成以下結果，裡面的文字也跟著轉動

範例2. 不停旋轉的圓圈

假設我們直接對div做animation會造成以下結果，裡面的文字也跟著轉動

用法4. 製作對話框樣式
有時後會運用到一些對話框在議程介紹中，為了顧及修改彈性，利用偽元素去製作是不錯的方法。

用法5. 清單項目符號設計
項目符號素材 、 三角形製作方法 -假設不想使用原有的清單符號項目時，就可以使用偽元素來下去製作，可以使用項目符號素材、圖片或利用border製作出三角形

用法6. 製作hover線段滑出效果
常用於製作 nav item 上的效果，是一定要學會的用法喔！😎

用法7. 使用偽元素:before和:after製作照片堆疊效果
此運用方式較為特別‼，是利用陰影及border製作出照片堆疊的效果

偽元素還有許多非常好用的功能，這邊提供一些網站給大家參考：
1.magicCss: CSS3奇思妙想，单标签实现各类图形 — Demo
2.labs標籤效果
3.使用偽元素創建圖片堆疊
4.【CSS進階】偽元素的妙用–單標籤之美