詳解CSS content的使用機制,原來還可以這樣用!

青灯夜游
發布: 2021-08-19 09:02:22
轉載
4606 人瀏覽過

這篇文章帶大家了解CSS中的content屬性,介紹一下content的使用場景,希望對大家有幫助!

詳解CSS content的使用機制,原來還可以這樣用!

在開發中遇到類似清除浮動、小圖示、替換內容等場景時不可避免會遇到content 屬性,一般就是百度下解決方案,甚少細究到底,在看《CSS 世界》這本書時看了下content 章節,今天這裡就詳細介紹下content 的使用機制。

content 屬性用於與 :before 和 :after 偽元素配合使用,來插入生成內容。使用 content 屬性插入的內容都是匿名的可替換元素。首先我們先了解下什麼是可替換元素呢?

取代元素

首先看下圖片載入:

詳解CSS content的使用機制,原來還可以這樣用!  詳解CSS content的使用機制,原來還可以這樣用!
登入後複製

修改了 img 的 src 屬性,導致顯示的圖片發生了變化。這種透過修改某個屬性值呈現的內容就可以被替換的元素就稱為「替換元素」。

典型的替換元素:詳解CSS content的使用機制,原來還可以這樣用!