css中before after是什么?這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容,讓我們一起來看看吧!
成都創新互聯公司-專業網站定制、快速模板網站建設、高性價比臨泉網站開發、企業建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式臨泉網站制作公司更省心,省錢,快速模板網站建設找我們,業務覆蓋臨泉地區。費用合理售后完善,十年實體公司更值得信賴。
一段帶有:before偽元素樣式的HTML代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> h2:before {content:url(/test/img/2.png)} </style> </head> <body> <h2>這里是一段大標題</h2> <p>css before偽元素使用代碼示例</p> </body> </html>
那么上述代碼效果如下圖:
2.一段帶有:after偽元素樣式的HTML代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> h2:after {content:url(/test/img/2.png)} </style> </head> <body> <h2>這里是一段大標題</h2> <p>css :after偽元素使用代碼示例</p> </body> </html>
代碼效果如下圖:
那么我們通過上述1和2 的示例中,是否得出一些關于css before和after偽類使用方法的結論呢?其實正如before和after的中文翻譯差不多,在...之前和在...之后。
在css中,:before偽元素的用處就是可以在元素的內容之前插入新的內容,如示例1中,我們使用:before元素給h2這個大標題的前面加了一張圖片。
而:after偽元素的用處就是可以在元素的內容之后插入新的內容,如示例2中,我們使用:after元素給h2這個大標題的后面添加了一張圖片。
其實before和after偽元素也可以說是真正的元素,雖然偽元素不能體現在文檔樹里面,但是我們仍然可以給他們加任何樣式,而且所加樣式可以和普通頁面元素一樣!
感謝各位的閱讀!看完上述內容,你們對css中before after是什么大概了解了嗎?希望文章內容對大家有所幫助。如果想了解更多相關文章內容,歡迎關注創新互聯行業資訊頻道。
網站欄目:css中beforeafter是什么
網站URL:http://vcdvsql.cn/article24/jhegce.html
成都網站建設公司_創新互聯,為您提供商城網站、、網站設計、App開發、動態網站、域名注冊
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯