偽元素、 before after

CSS偽元素常見運用

趙嘉恩 2020/05/18 19:04:16
43

::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/

 

趙嘉恩