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

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

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

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

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

替换元素

首先看下图片加载:

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

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

典型的替换元素: