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 形成边界居中的情况。