CSS之after与before的content 和 attr 配合使用

前端之家收集整理的这篇文章主要介绍了CSS之after与before的content 和 attr 配合使用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

content 和 attr 配合使用

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

 */

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

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

content里的字符串连接操作

这种字符串连接很像常规编程语言了:

 */

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

还需要用JavaScript里拼装字符串吗?CSS3里就能完成这些,是不是感觉CSS3可以部分的替代Javascript了! attr的动态生成页面内容的能力着实是一件让人兴奋的事情。你实际上可以用它配合content页面的很多其他元素和属性进行操作。

猜你在找的CSS相关文章