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

这里是修真院前端小课堂，本篇分析的主题是

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

每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

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

【CSS-task15】    知道css有个content属性吗？有什么作用？有什么应用？小课堂【北京】

    分享人：李仁

 

1.背景介绍

 

css有一个属性叫做content。content只能使用在:after和:before之中。它用于在元素之前或者元素之后加上一些内容content属性早在CSS2.1的时候就被 

 

引入了，可以使用:before以及:after伪元素生成内容。此特性目前已被大部分的浏览器支持段落注释。但是目在CSS 3 Generated Content工作草案中，

 

content属性添加了更多的特征，例如：插入以及移除文档内容的能力，以创建脚注，结语，及前还没有浏览器支持content的扩展功能。

 

2.知识剖析:

before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素需要注意的是如

 

果没有content属性，伪类元素将没有任何作用。但是可以指定content为空，插入的内容默认是一个行内元素，并且在HTML源代码中无法看到，这就是

 

为什么称之为伪类元素的理由，所以也就无法通过DOM对其进行操作。伪类元素也会像其他子元素一样正常继承父元素的一些CSS属性，比如字体等。

 

3.常见问题如何使用:

after和:before中的content属性呢？

 

4.解决方案

<a href="https://segmentfault.com/a/1190000002750033">https://segmentfault.com/a/1190000002750033</a>

 

5.编码实战

 

6.更多讨论

 

强大的CSS3 attr()方法。CSS3 Values and Units草案扩展了attr()表达式的范围，除了返回字符串，还可以返回诸如CSS colors, CSS integer, length, 

 

angle, time, frequency以及其他一些单元。通过使用自定义的data属性，可以实现一些非常强大的效果，诸如简单图表图形的渲染，动画效果的实现。例

 

如我们可以设置根据元素的attribute值设定background-color的颜色值，这在显示在线调色板上会大放异彩；我们还可以根据attribute值指定元素的大

 

小，就像定义图表每个条形的长度一样。总之，attr()的潜力惊人。

 

7.参考文献

<a href="https://segmentfault.com/a/1190000002750033">https://segmentfault.com/a/1190000002750033</a>鸣谢感谢大家观看

 

BY :  黄志波|罗宇|冯馨雨|李仁 

本文地址：https://blog.csdn.net/jnshu_it/article/details/85987894