在HTML元素伪类after的attr方法中拼接字符串

5997次阅读 352人点赞 作者: WuBin 发布时间: 2021-12-23 09:28:28
扫码到手机查看

基本content用法

CSS3的出现使得样式表的功能变得越来越强大,而某种意义上也可以说它让我们开发起来越来越容易了。CSS3里虽然有很多重量级的新特征出现——例如transitions, animations, 和 transforms,但有一个特征虽然不是那么抢眼,但却是非常的有用,它就是contentattr表达式,它们能在你的页面下面悄悄的使用CSS来生成内容,下面让我们看看attrcontent如何相互配合产生神奇效果的。

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

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

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

content和attr以及字符串链接

如果你不想把content内容在CSS里写死,那你可以使用attr表达式来从页面元素中动态的获取内容:

<div data-line="1"></div>

div[data-line]:after { 
	content: attr(data-line); /* 属性名称上不要加引号! */
}

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

当然也可以在attr中进行字符串的拼接!!这种字符串连接很像常规编程语言了:

<div data-line="yy">xx</div> 

div[data-line]:after { 
	content: "[line-" attr(data-line) "]"; 
}

最后显示的结果就是xx[line-yy]。

attr的动态生成页面内容的能力着实是一件让人兴奋的事情。你实际上可以用它配合content对页面的很多其他元素和属性进行操作。

点赞 支持一下 觉得不错?客官您就稍微鼓励一下吧!
关键词:attr,content,css3
推荐阅读
  • python基础-操作列表和迭代器

    python基础笔记-操作列表和迭代器的相关方法

    6247次阅读 131人点赞 发布时间: 2024-06-13 13:26:27 立即查看
  • uniapp实现被浏览器唤起的功能

    当用户打开h5链接时候,点击打开app若用户在已经安装过app的情况下直接打开app,若未安装过跳到应用市场下载安装这个功能在实现上主要分为两种场景,从普通浏览器唤醒以及从微信唤醒。

    10621次阅读 704人点赞 发布时间: 2022-12-14 16:34:53 立即查看
  • PHP

    【正则】一些常用的正则表达式总结

    在日常开发中,正则表达式是非常有用的,正则表达式在每个语言中都是可以使用的,他就跟JSON一样,是通用的。了解一些常用的正则表达式,能大大提高你的工作效率。

    14637次阅读 577人点赞 发布时间: 2021-10-09 15:58:58 立即查看
  • 【中文】免费可商用字体下载与考证

    65款免费、可商用、无任何限制中文字体打包下载,这些字体都是经过长期验证,经得住市场考验的,让您规避被无良厂商起诉的风险。

    13431次阅读 1081人点赞 发布时间: 2021-07-05 15:28:45 立即查看
  • Vue

    Vue3开发一个v-loading的自定义指令

    在vue3中实现一个自定义的指令,有助于我们简化开发,简化复用,通过一个指令的调用即可实现一些可高度复用的交互。

    17474次阅读 1408人点赞 发布时间: 2021-07-02 15:58:35 立即查看
  • JS

    关于手机上滚动穿透问题的解决

    当页面出现浮层的时候,滑动浮层的内容,正常情况下预期应该是浮层下边的内容不会滚动;然而事实并非如此。在PC上使用css即可解决,但是在手机端,情况就变的比较复杂,就需要禁止触摸事件才可以。

    15874次阅读 1284人点赞 发布时间: 2021-05-31 09:25:50 立即查看
  • Vue

    Vue+html2canvas截图空白的问题

    在使用vue做信网单页专题时,有海报生成的功能,这里推荐2个插件:一个是html2canvas,构造好DOM然后转canvas进行截图;另外使用vue-canvas-poster(这个截止到2021年3月...

    31276次阅读 2464人点赞 发布时间: 2021-03-02 09:04:51 立即查看
  • Vue

    vue-router4过度动画无效解决方案

    在初次使用vue3+vue-router4时候,先后遇到了过度动画transition进入和退出分别无效的情况,搜遍百度没没找到合适解决方法,包括vue-route4有一些API都进行了变化,以前的一些操...

    27286次阅读 2105人点赞 发布时间: 2021-02-23 13:37:20 立即查看
交流 收藏 目录