CSS中content和attr的用法

  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()

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值