css:before和:after

2020/11/9 8:51:07   閱讀:7616    發(fā)布者:7616


:before是css中的一種偽元素,可用于在某個(gè)元素之前插入某些內容。
:after是css中的一種偽元素,可用于在某個(gè)元素之后插入某些內容。

<style>
    p:before{
        content: "H"  /*:before和:after必帶技能,重要性為滿(mǎn)5顆星*/
    }
    p:after{
        content: "d"  /*:before和:after必帶技能,重要性為滿(mǎn)5顆星*/
    }
  </style>
  <p>ello Worl</p>


以上的代碼將會(huì )在頁(yè)面中展現的是"Hello World"
p標簽內部的內容的前面會(huì )被插入一個(gè):before偽元素,該偽元素內包含的內容是"H";而在p標簽內的內容后面會(huì )被插入一個(gè):after偽元素,該元素包含的內容是"d"。
清除浮動(dòng) 場(chǎng)景:當一個(gè)元素在眾多設置了浮動(dòng)樣式float: left的后面,但是又要另起一行時(shí);建議:強烈推薦;代碼:.container::before { content: ""; display: table; } .container::after { clear: both; }
利用::before ::after偽類(lèi),動(dòng)態(tài)的在元素開(kāi)始和末尾增加標簽這一特性,我們可以做出很多豐富的樣式而且又減少了 DOM 的復雜度。