CSS ::before 伪元素
更多“自己尝试”的例子见下文。
定义和用法
`::before` 伪元素会在指定元素的*内容*前面插入一些内容。
使用 content 属性来指定要插入的内容。 `content` 的值可以是:
- 一个字符串: content: "Hello world!";
- 一张图片: content: url(myimage.jpg);
- 什么都没有: content: none;
- 一个计数器: content: counter(li);
- 一个引号: content: open-quote;
- 一个属性值: content: " (" attr(href) ")";
提示: 请注意,插入的内容仍然在指定元素内部。插入的内容会添加到元素内部的其他内容之前。
使用 ::after 在指定元素的*内容*后面插入一些内容。
版本 | CSS2 |
---|
浏览器支持
表中数字表示首次完全支持此伪元素的浏览器版本。
伪元素 | |||||
---|---|---|---|---|---|
::before | 4.0 | 9.0 | 3.5 | 3.1 | 7.0 |
CSS 语法
::before {
CSS 声明;
}
更多示例
示例
在每个 <p> 元素的内容前面插入一个字符串,并为插入的内容设置样式
p::before {
content: "Read this -";
background-color: yellow;
color: red;
font-weight: bold;
}
自己动手试一试 »
相关页面
CSS 教程:CSS 伪元素
CSS 伪元素参考: ::after