您好,欢迎来到二三娱乐。
搜索
您的当前位置:首页content 和attr 神奇的组合

content 和attr 神奇的组合

来源:二三娱乐

基本content用法
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-配合使用,因为传统的其它属性虽然也能存值,但通常不适合存放表达性文字。

content里的字符串连接操作

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

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

Copyright © 2019- yule263.com 版权所有 湘ICP备2023023988号-1

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务