content和偽元素 · 前端知識匯總

### 作用 1. 一般情況我們使用content屬性和偽元素是用來在原本的內容添加新的內容，常見的偽類比如::after 和::before 2. 使用偽元素或content 插入的內容無法被選中，比如我們在一個h1里面插入content ， ~~~ <style> h1::after { content: "這是after插入的內容" } </style> <body> <h1>這是一個標題</h1> </body> ~~~ 然后可以發現，這個after元素插入的內容是無法被選中的： ![](https://box.kancloud.cn/886a3d56c28e314e2d57836cfe6a0f6e_669x105.png) 3. 可以使用偽元素來做分隔符 ~~~ .border-left::before{ content: ''; padding: 0 10px; margin-left:20px; border-left: 1px solid #ddd; } <span>登錄</span><span class="border-left">注冊</span> ~~~ ![](https://box.kancloud.cn/f3274a33eff1f8991fd4e10740cc712c_166x41.png) 解析：這里的padding 為什么是10 而margin-left是20時才居中？因為這個偽元素他沒有寬度，所以這個padding0 10px會使該偽元素的左內邊距和又內邊距相加，變成20px然后插入文字的開頭，所以就跟左側的margin-left:20px 形成邊界居中的情況。