【CSS3】---:before :after生成内容

来源：互联网发布：广点通php sdk 编辑：程序博客网时间：2024/06/12 03:36

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

效果如下：

例子：

页面

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

效果

0 0