知道css有个content属性吗？有什么作用？有什么应用？
小课堂【北京-WEB-A组】
分享人：要来点本子吗
大家好，我是IT修真院北京分院第35期的学员，一枚正直、纯洁、善良的前端程序员。
今天给大家分享一下，修真院官网css任务15，深度思考中的知识点——知道css有个content属性吗？有什么作用？有什么应用？
##1.背景介绍
学习前端知识我们常常提到盒模型，盒模型的几个要素，margin、border、padding 、content这四个属性，前三个经常用到讲到，但第四个content属性怎么用？今天我们就来讲讲这个 。
content的意思顾名思义，是“内容”，它的作用就是在css中直接生成网页显示的 内容， 这个属性要结合：before和：after这俩个伪类属性来使用。下面详细介绍它的用法 。
##2.知识剖析
before和after是什么呢？
:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素.需要注意的是如果没有content属性，伪类元素将没有任何作用。但是可以指定content为空，插入的内容默认是一个行内元素，并且在HTML源代码中无法看到，这就是为什么称之为伪类元素的理由，所以也就无法通过DOM对其进行操作。伪类元素也会像其他子元素一样正常继承父元素的一些CSS属性，比如字体等。
##3.常见问题
content各属性值的具体使用方法
##4.解决方案
CSS中主要的伪元素有四个：before/after/first-letter/first-line，在before/after伪元素选择器中，有一个content属性，能够实现页面中的内容插入。
插入纯文字
content:“插入的文章”，或者content:none不插入内容
html:
<h1>这是h1</h1>
<h2>这是h2</h2>
css
h1::after{
content:"h1后插入内容"
}
h2::after{
content:none
}
嵌入文字符号
可以使用content属性的open-quote属性值和close-quote属性值在字符串两边添加诸如括号、单引号、双引号之类的嵌套文字符号。open-quote用于添加开始的文字符号，close-quote用于添加结束的文字符号。修改上述的css:
h1{
quotes:"(" ")"; /*利用元素的quotes属性指定文字符号*/
}
h1::before{
content:open-quote;
}
h1::after{
content:close-quote;
}
h2{
quotes:"\"" "\""; /*添加双引号要转义*/
}
h2::before{
content:open-quote;
}
h2::after{
content:close-quote;
}
插入图片
content属性也可以直接在元素前/后插入图片
html:
<h3>这是h3</h3>
css:
h3::after{
content:url(img.png)
}
插入元素的属性值
content属性可以直接利用attr获取元素的属性，将其插入到对应位置。
html:
<a href="http:///www.baidu.com">这是链接 </a>
css:
a:after{
content:attr(href);
}
##5.编码实战
点开链接
##6.扩展思考
为什么content属性很少用到？
前端书写代码时提倡内容样式的分离，而content在css中插入内容正好又混淆了这一原则；并且该属性兼容性也不太好。
##7.参考文献
参考一：CSS3的content属性详解
参考二：菜鸟教程content属性
##8.更多讨论
1，元素能直接使用 content？
可以在元素后面结合after，before使用。
2，Content的使用必须要结合伪类吗？
是的，只能结合伪类使用。如果你要加上内容的话。
3，还有什么别的内容可以加。
可以加上项目编号、种类、修饰、嵌套等。
感谢大家观看
By 要来点本子吗
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！