css伪元素after、before

此前，我使用伪类基本上只用到了:first-child和:last-child，来给遍历的列表标签去除最后一项的分割线和边距样式之类的。

因为我尽量避免使用浮动，所以也没有常使用伪类来去除浮动。

最近做一个头像列表的时候发现，用伪元素:after或者:before意外的好用。

效果如图：

---

---

一、概念

• 简单来说，就是给当前的标签前后插入一个元素
• 元素包括：文本、盒样式、图片
• 常用属性包括：
  • content（必填，即使为空字符串）
  • 盒样式

二、应用

• 给第一项块元素里的图片div添加after伪元素，使用:nth-of-type(1)选择第一项(:first-child也行)
• 再对这一项，添加伪元素:after
• 设置好定位和背景颜色圆角居中，如下图