本文主要是針對:before和:after寫一些內容,還有幾個小樣式略微帶過的介紹下。
什么是:before和:after? 該如何使用他們?
:before是css中的一種偽元素,可用于在某個元素之前插入某些內容。
:after是css中的一種偽元素,可用于在某個元素之后插入某些內容。
下面我們先跑個簡單的代碼測試下效果:
以上的代碼將會在頁面中展現的是”Hello World”。我們通過瀏覽器的”審查元素”看到的內容是:
p標簽內部的內容的前面會被插入一個:before偽元素,該偽元素內包含的內容是”H”;而在p標簽內的內容后面會被插入一個:after偽元素,該元素包含的內容是”d”。作為一只合格的程序猴子,捍衛”Hello World”的完整存在是必要的。
既然筆記主要針對是:before和:after,那么肯定不會只是僅僅有以上的簡單介紹就完事。下面我們看看平常該怎么使用他們。
1.結合border寫個對話框的樣式。
將上面這句話拆成2部分:結合border,寫個對話框的樣式。
既然是結合border,那么我們先轉個小話題,簡單由淺入深的介紹下怎么用border畫三角形樣式(這個三角形在寫對話框樣式的時候需要):
新聞熱點
疑難解答