前言

本文讲解CSS中使用频率并不高的content属性,通过多个实用的案例,带你由浅入深的掌握content的用法,让代码变得更加简洁、高效。

定义

W3school中这样定义:

content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容。

该属性用于定义元素之前或之后放置的生成内容。默认地,这往往是行内内容,不过该内容创建的框类型可以用属性 display 控制。

在前端日常开发中,content属性使用频率并不高,所以开发者一般对它的理解并不深入,通常会在清除浮动、字体图标时偶尔使用。下面通过各种案例,来一起看看content的妙用。

案例

1. 清除浮动

<!--css-->
.left {float: left}
.right {float: right}
.clear:after {
content: '';
clear: both;
display: block;
}
<!--html-->
<div class="container clear"