干货:CSS中content和attr的用法

CSS/设计
508
0
0
2022-05-18
标签   Css基础

content和attr属性用的不是很多,但是它们能在页面下面悄悄的使用CSS来生成内容,下面让我们看看content和attr的用法相互配合产生神奇效果的

基本content用法

content属性能让程序员使用CSS往页面元素里填写内容:

.myDiv:after { content: "我是一个使用*content*属性生产的静态文字"; }

注意,如果想让伪元素:after绝对定位,必须对div设置position:relative

content和attr配合使用

content使用attr来从页面元素中动态的获取内容:

干货:CSS中content和attr的用法

attr属性通常和自定义属性data-配合使用,因为传统的其它属性虽然也能存值,但通常不适合存放表达性文字。

content里的字符串连接操作

干货:CSS中content和attr的用法

还需要用JS里的字符串吗?答案是不需要了,CSS3里就能完成这些,是不是很神奇!attr的动态生成页面内容的能力着实是一件让人兴奋的事情。实际上可以用它配合content对页面的很多其他元素和属性进行操作。

切版 qieban(.cn)