CSS生成内容

来源：互联网发布：证券分析软件下载编辑：程序博客网时间：2024/05/24 00:40

在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;}

上面这个示例是最常见的，也是最简单的，我们再来看一个插入元素属性值的方法。

假设我们有一个元素：

可以通过”:after”和”content:attr(title)”将元素的”title”值插入到元素内容“我是元素”之后：

a:after {  content:attr(title);       color:#f00;}

效果如下：

任务

在CSS编辑器的第1行输入正确代码，在元素文本内容之前插入文本“我是被插进来的”。

温馨提示：案例的效果如上图所示才算顺利通关，否则请再学习一遍本节的知识点！

<!doctype www.dztcsd.com/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>

0 0