CSS进阶之熟悉又陌生的Content

[[412960]]

本文转载自微信公众号「微医大前端技术」，作者陈晨。转载本文请联系微医大前端技术公众号。

创新互联公司是一家专注于做网站、成都做网站与策划设计,晋安网站建设哪家好?创新互联公司做网站,专注于网站建设10多年,网设计领域的专业建站公司;建站业务涵盖:晋安等地区。晋安做网站价格咨询:18982081108

前言

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

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

替换元素

首先看下图片加载：

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.

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

典型的替换元素：、