更新時間:2021-09-24 來源:黑馬程序員 瀏覽量:
:before偽元素選擇器用于在被選元素的內容前面插入內容,必須配合content屬性來指定要插入的具體內容。其基本語法格式為:
<元素>:before{ content: 文字/url(); }
在上述語法中,被選元素位于“:before”之前,“{}”中的content屬性用來指定要插入的具體內容,該內容既可以為文本也可以為圖片。
下面通過一個案例來演示:before選擇器的用法。
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>:before選擇器的使用-黑馬程序員前端高手班http://web.itheima.com</title> <style type="text/css"> p:before{ content: "傳智教育"; color: #c06; font-size: 20px; font-family: "微軟雅黑"; font-weight: bold; } a {color:black; text-decoration: none;} </style> </head> <body> <p>黑馬程序員專注于Java、python大數據、web前端開發(fā)、人工智能、UI設計、軟件測試、新媒體+短視頻直播運營、產品經理、Linux+運維開發(fā)人才的培養(yǎng),提供的<a href="http://m.3rdspacecomics.com/taught/taughtweb.html" target="_blank">免費視頻教程</a>。</p> </body> </html>
:after偽元素選擇器用于在某個元素之后插入一些內容,使用方法與:before選擇器相同。下面通過一個案例來做具體演示。
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>:after選擇器的使用-黑馬程序員前端高手班http://web.itheima.com</title> <style> p:after{content: url(../../images/薪資.jpg);} a {color:black; text-decoration: none;} </style> </head> <body> <p>黑馬程序員專注于Java、python大數據、web前端開發(fā)、人工智能、UI設計、軟件測試、新媒體+短視頻直播運營、產品經理、Linux+運維開發(fā)人才的培養(yǎng),提供的<a href="http://m.3rdspacecomics.com/taught/taughtweb.html" target="_blank">免費視頻教程</a>。</p> </body> </html>
在上面案例中,第7行代碼“p:after{content: url(../../images/薪資.jpg);}”用于在段落之后添加一張圖片。
猜你喜歡: