次世代 Hugo

在文字前後實作 Quote

Quote 為常見的 Component，在不改變 HTML 前提下可使用 :before 與 :after 實作。

2021-03-29

Underline 為常見的 Component，在不改變 HTML 前提下可使用 :after 實作。

2021-03-29

Check List 為常見的 Component，在不改變 HTML 前提下可使用 :before 實作。

2021-03-29

實務上有時會需要三角形加以裝飾，此時不必使用圖片，只要使用 CSS 就可繪製三角形。

2021-03-27

after 允許我們動態新增內容，也因為本質是 Element，所以可以設定各種 CSS Property。

2021-03-26

before 允許我們動態新增內容，也因為本質是 Element，所以可以設定各種 CSS Property。

2021-03-26

在右上角帶有 Badge 顯示特別資訊亦為常見 Layout，可使用 Absolute Position + Relative Position 實現。

2021-03-25

Card 常在左上角帶有 Ribbon 顯示特別資訊，可使用 Absolute Position + Relative Position 實現。

2021-03-25

由於 Relative 是相對於原 Element 空間做 Shift，因此可能與其他 Element 有 Overlap，因此必須考慮其 Overlap 優先權。

2021-03-23

Fixed 與 Absolute 都會產生新 Layer，Relative 則維持在原本 HTML 內。

2021-03-22