css伪元素after、before

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

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

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

效果如图：

---

---

一、概念

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

二、应用

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

三、after、before的坑

1、伪元素添加图片

content属性，直接使用图片，即使写width,height也无法改变图片大小

• 解决方法：使用background:url()来添加图片
  • 注意：此时content:''写成空，背景图片的宽高可以设置

/*伪元素添加图片：*/
.box:after{
  /*内容置为空*/
  content:"";
  /*设置背景图，并拉伸*/
  background:url()no-repeatcenter;
  /*必须设置此伪元素display*/
  display:inline-block;
  /*必须设置此伪元素大小（不会被图片撑开）*/
  background-size:100%;
  width:30px;
  height:30px;
}

2、苹果端伪元素不生效

img、input和其他的单标签是没有:after和:before伪元素的（在部分浏览器中没有，如:苹果端会发现无效），因为单标签本身不能有子元素。

• 解决方法：给img包一个div可以解决

3、动态改变伪元素的图片

• 给当前元素添加伪元素图片的基础样式，再动态class来写伪元素的图片

四、官网文档

万事不顺，查文档
伪类w3c官方文档

---

如有建议和疑问可联系
QQ：1017386624
邮箱：[email protected]