知道css有个content属性吗？有什么作用？有什么应用？

1.背景介绍

学习前端知识我们常常提到盒模型，盒模型的几个要素，margin、border、padding 、content这四个属性，前三个经常用到讲到，但第四个content属性怎么用？今天我们就来讲讲这个 。 content的意思顾名思义，是“内容”，它的作用就是在css中直接生成网页显示的 内容， 这个属性要结合：before和：after这俩个伪类属性来使用。下面详细介绍它的用法 。

2.知识剖析

 

 

before和after是什么呢？

:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素.需要注意的是如果没有content属性，伪类元素将没有任何作用。但是可以指定content为空，插入的内容默认是一个行内元素，并且在HTML源代码中无法看到，这就是为什么称之为伪类元素的理由，所以也就无法通过DOM对其进行操作。伪类元素也会像其他子元素一样正常继承父元素的一些CSS属性，比如字体等。

三.常见问题

content各属性值的具体使用方法

四.解决方案

插入内容可以直接在content后面加入。

<h1>我是大标题   </h1> h1::after{ content:"我是插入内容" }

效果如下。

 

插入图片

 

<h3>我是要插入图片的h3</h3> h3::after{ content:url(../jsimages/task2-fanpai.png) }

效果如下

 

插入编号

 

<h5>我是给要编号的h5</h5> <h5>我是给要编号的h5</h5> <h5>我是给要编号的h5</h5> h5{ counter-increment:my; } p::after{ content: "neifjdlsfldskfkjldsfk.dsjfjsklfjkl"; }

效果如下：

更多用法  点击打开链接

 

 

五.编码实战

请看上面

 

六.拓展思考

 

为什么content属性很少用到

 

 

个人认为，我们前端书写代码时提倡内容样式的分离，而content的伪类写法正好又混淆了这一原则。

 

七.参考文献

 CSS3的content属性详解

菜鸟教程对content的解释

 

 

八.更多讨论

1，元素能直接使用 content？

可以在元素后面结合after，before使用。

2，Content的使用必须要结合伪类吗？

是的，只能结合伪类使用。如果你要加上内容的话。

3，还有什么别的内容可以加?

可以加上，属性值，文字符号，指定编号种类等。