1.基本content用法
content
属性就是使用CSS往页面元素里填写内容:
.myDiv:after {
content: "我是一个使用*content*属性生产的静态文字";
}
如果想让伪元素:after
绝对定位,你必须对你的div设置position: relative
。
2.content
和 attr
配合使用
如果你不想把content
内容在CSS
里写死,那你可以使用attr
表达式来从页面元素中动态的获取内容:
/* <div data-line="1"></div> */
div[data-line]:after {
content: attr(data-line); /* 属性名称上不要加引号! */
}
attr
属性通常和自定义属性data-
配合使用,因为传统的其它属性虽然也能存值,但通常不适合存放表达性文字。
3.content
里的字符串连接操作
这种字符串连接很像常规编程语言了:
/* <div data-line="1"></div> */
div[data-line]:after {
content: "[line " attr(data-line) "]";
}