【CSS3】CSS生成內容:content
在Web中插入內容，在CSS2.1時代依靠的是JavaScript來實現。但進入CSS3進代以後咱們能夠經過CSS3的僞類「:before」，「:after」和CSS3的僞元素「::before」、「::after」來實現，其關鍵是依靠CSS3中的「content」屬性來實現。不過這個屬性對於img和input元素不起做用。css
content配合CSS的僞類或者僞元素，通常能夠作如下四件事情：html
| 功能瀏覽器 |
功能說明url |
| nonespa |
不生成任何內容code |
| attr視頻 |
插入標籤屬性值htm |
| urlblog |
使用指定的絕對或相對地址插入一個外部資源（圖像，聲頻，視頻或瀏覽器支持的其餘任何資源）ip |
| string |
插入字符串 |
實例展現：
在CSS中有一種清除浮動的方法叫「clearfix」。而這個「clearfix」方法就中就使用了「content」，只不過只是在這裏插入了一個空格。以下所示：
.clearfix:before, .clearfix:after { content:」」; display:table; } .clearfix:after { clear:both; overflow:hidden; }
上面這個示例是最多見的，也是最簡單的。
（1）咱們再來看一個插入元素屬性值(attr)的方法。
假設咱們有一個元素：
<a href="##" title="我是一個title屬性值，我插在你的後面">我是元素</a>
能夠經過」:after」和」content:attr(title)」將元素的」title」值插入到元素內容「我是元素」以後：
a:after { content:attr(title); color:#f00; }
效果以下：
（2）插入字符串
CSS代碼：
h2:before {
content: "我是額外文字！";
}
HTML代碼：
<h2>我是標題</h2>效果以下：
我是額外文字！我是標題
（3）插入一個外部資源（圖像，聲頻，視頻或瀏覽器支持的其餘任何資源）
index.html:
<!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>
style.css:
h1:before {
content:url("http://s11.sinaimg.cn/mw690/905e347bge076884ef80a&690");
}
效果：
