CSS偽元素常見運用

::before、::after 大概是最常使用的偽元素，使用的範圍廣及相容度高，before 為內容的「之前」，after 則是內容「之後」，同時偽元素也會「繼承」原本元素的屬性，如果原本文字是黑色，偽元素的文字也會是黑色。

範本1-文字區塊:

顯示結果:

範例2-製作立體陰影

在原本區塊加上陰影後在使用::before、::after 及transform: rotate(5deg);旋轉角度，讓左右邊影子能更明顯及立體。

顯示結果:

範例3-項目符號

當沒有用任何樣式時會顯示數字，使用list-style-type: none，隱藏基本樣式的數字並加上一些邊界空白的設定

使用 counter-increment 自訂計數器的名稱

加上before原素及背景圖，就可以放上任何圖檔做項目符號的美化

顯示結果:

範例4-製作左右橫線中間文字效果

當標題文字左右邊想要有線條延伸，文字多寡不管如何增加都不影響，在響應式設計時也能有彈性的變動，可使用after及before寫法

讓文字能夠垂置左右置中可使用display:flex，

延伸寬100%的線

顯示結果:

文章引用:

https://medium.com/@miahsuwork/css-%E5%81%BD%E5%85%83%E7%B4%A0%E4%BD%BF%E7%94%A8%E5%8A%9F%E7%95%A5-4f96beb4ce9f

https://ithelp.ithome.com.tw/articles/10193561?sc=iThelpR

https://blog.gtwang.org/web-development/customize-ordered-lists-pseudo-element/