區分偽元素和偽類

• 在CSS3已規定偽元素用雙冒號::表示，偽類用單冒號表示：
• 偽元素是元素，會長在DOM tree上
• 偽類則是狀態(例如 點選:check)，不會長在DOM tree上
  
• 偽元素是插入假元素，不能用在<img>這類沒有結尾標籤的tag上

介紹before和after

::before和::after用在可以裝子元素的HTML tag

• ::before
  可以想成是建立『第一個』『子元素』內容
• ::after
  可以想成是建立『最後一個』『子元素』內容

範例1

• 在div1裡建立最後一個子元素，因為content沒有內容，所以高度撐不開，下黑線緊貼div2
  

• div1的content內容"111"，高度撐開了
  

範例2

可以看到::before是變成div3裡的第一個子元素，
::after是變成div3裡的最後一個子元素，而不是在div3和div4中間

範例3

Since the initial value of display is inline, this will generate an inline box. Like other inline children of <p, it will participate in <p ’s inline formatting context, potentially sharing a line with other content.
由於顯示的初始值是內聯的，因此將生成內聯框。與p的其他內聯子項一樣，它將參與p的內聯格式化上下文，可能與其他內容共享一行。

偽元素的內容是1111111，所以生成inline box，排版規則會照inline排版

• margin只能水平左右移動
  

• padding就算上下會生成，但也只能水平左右移動