在Web中插入内容，在CSS2.1时代依靠的是JavaScript来实现。但进入CSS3进代之后我们可以通过CSS3的伪类“:before”，“:after”和CSS3的伪元素“::before”、“::after”来实现，其关键是依靠CSS3中的“content”属性来实现。不过这个属性对于img和input元素不起作用。
content配合CSS的伪类或者伪元素，一般可以做以下四件事情：
|
功能 |
功能说明 |
|
none |
不生成任何内容 |
|
attr |
插入标签属性值 |
|
url |
使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源） |
|
string |
插入字符串 |
实例展示：
在CSS中有一种清除浮动的方法叫“clearfix”。而这个“clearfix”方法就中就使用了“content”，只不过只是在这里插入了一个空格。如下所示：
.clearfix:before,
.clearfix:after {
content:””;
display:table;
}
.clearfix:after {
clear:both;
overflow:hidden;
}
上面这个示例是最常见的，也是最简单的，我们再来看一个插入元素属性值的方法。
假设我们有一个元素：
<a href="##" title="我是一个title属性值，我插在你的后面">我是元素</a>
可以通过”:after”和”content:attr(title)”将元素的”title”值插入到元素内容“我是元素”之后：
a:after {
content:attr(title);
color:#f00;
}
效果如下：
例子：
页面
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS生成内容</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <h1>我是标题，在我前面插入内容吧</h1> </body> </html>
css
h1:before {
content:"我是添加进来的";
color: red;
}
效果
欢迎加入IT交流群：123493055
时间： 2024-10-06 22:59:27