怎么爬before after之间的内容_《CSS世界》笔记——content内容生成技术

content属性生成的内容都是替换元素。在实际项目中，content属性几乎都是用在::before/::after这两个伪元素中，因此“content内容生成技术”也称为“::before/::after伪元素技术”。

content辅助元素生成

此应用不在content生成的内容，而在于伪元素本身，因为伪元素必须有content属性。因此，通常会把content属性设置为空字符串。如清除浮动：

.clear::after {
  content: "";
  display: block;
  clear: both;
}

content字符内容生成

content字符内容生成指的是直接写入字符内容，最常见的应用就是配合@font-face规则实现图标字体效果（iconfont）

.icon-home::before{
  content: "home";
  font-family: myicon
  font-size: 32px;
}

content图片生成

content图片生成指的是直接用url功能符显示图片，但是用content生成的图片尺寸无法控制，如下CSS设置的图片最终呈现出的尺寸是1.png的固有尺寸，width和height均不起作用，因为content生成的内容是替换元素，尺寸不受非替换元素::before的控制。

div::before {
  content: url(1.png);
  display: block;
  width: 200px;
  height: 200px
}

因此实际应用中伪元素的图片更多的是使用background-image模拟，如：

div::before {
  content: "";
  display: inline-block;
  backgroun-image: url(1.png);
  width: 100px;
  height: 100px;
b  
}

content计数器

CSS计数器只能跟content属性在一起时才有作用，且常和伪元素（::before/::after）一起使用。CSS计算器使用有三步：

1. 使用属性counter-reset定义计数器的名称；
2. 使用属性counter-increment启动计数器递增；
3. 使用方法counter()/counters()显示计数。