小编给大家分享一下css中的content和attr属性有什么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
CSS3的出现使得样式表的功能变得越来越强大，同样也使得开发越来越简单便捷。尤其是CSS3中出现的新特性，如transitions,animations,和transforms等，这里面有一个特征虽然不是那么抢眼，但却是非常的有用，它就是content和attr表达式，它们能在页面下面悄悄的使用CSS来生成内容，下面让我们看看attr和content如何相互配合产生神奇效果的。
基本content用法
content属性能让程序员使用CSS往页面元素里填写内容
例：
.myDiv:after{content:"我是一个使用*content*属性生产的静态文字";}
请注意，如果想让伪元素:after绝对定位，必须对div设置position:relative
content和attr配合使用
如果不想把content内容在CSS里写死，那么可以使用attr表达式来从页面元素中动态的获取内容：
/*<divdata-line="1"></div>*/
div[data-line]:after{
content:attr(data-line);
/*属性名称上不要加引号！*/}
attr属性通常和自定义属性data-配合使用，因为传统的其它属性虽然也能存值，但通常不适合存放表达性文字。
content里的字符串连接操作
这种字符串连接很像常规编程语言：
/*<divdata-line="1"></div>*/
div[data-line]:after
{content:"[line"attr(data-line)"]";}
在CSS3中就可以完成像JavaScript里的字符串拼接，另外attr的动态生成页面内容也是一件很有用的事。我们可以用它配合content对页面的很多其他元素和属性进行操作。
以上是“css中的content和attr属性有什么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
