css -- 偽元素 · 前端知識 -- 學習整理

>[success] # 偽元素 * **偽元素**是一個附加至選擇器末的關鍵詞，允許你對被選擇元素的特定部分修改樣式 >[danger] ##### 偽元素 - ::before和::after 1. 偽元素`::before`和`::after`添加的內容默認是**inline元素**；這個兩個偽元素的content屬性，表示偽元素的內容,設置:before和:after時必須設置其content屬性，否則偽元素就不起作用。 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .item::after { content: '&copy'; } </style> </head> <body> <p></p> <div class="item">123</div> </body> </html> ~~~ * 效果圖 ![](https://img.kancloud.cn/bd/67/bd67a67c4d281f57bfb90b29575c5d82_136x37.png) 2. 插入圖片 ~~~ .item::after { content: url('地址'); } ~~~ 3. 因為默認是行內元素，因此設置寬高需要轉換為行內塊元素 ~~~ .item::after { content: ''; display: inline-block; width: 20px; height: 20px; } ~~~