详解CSS content的使用机制，原来还可以这样用！

本篇文章带大家了解一下CSS中的content属性，介绍一下content的使用场景，希望对大家有所帮助！

在开发中遇到类似清除浮动、小图标、替换内容等场景时不可避免会遇到 content 属性，一般就是百度下解决方案，甚少细究到底，在看《CSS 世界》这本书时看了下 content 章节，今天这里就详细介绍下 content 的使用机制。

content 属性用于与 :before 及 :after 伪元素配合使用，来插入生成内容。使用 content 属性插入的内容都是匿名的可替换元素。首先我们先了解下什么是可替换元素呢？

替换元素

首先看下图片加载：

<img src="1.jpg">
<!--替换-->
<img src="2.jpg">

修改了 img 的 src 属性，导致显示的图片发生了变化。这种通过修改某个属性值呈现的内容就可以被替换的元素就称为“替换元素”。

典型的替换元素：、、