content一般和:before,:after一起使用，用來生成內容(img和input沒有該屬性)，content的內容一般可以為以下四種：

none： 不生成任何值。

attr： 插入標簽屬性值

url： 使用指定的絕對或相對地址插入一個外部資源（圖像，聲頻，視頻或瀏覽器支持的其他任何資源）

string： 插入字符串

none

其實我們常用的clearfix就是應用了這個none了

css code

.clearfix:after {content: "";visibility: hidden;display: block;font-size: 0;clear: both;height: 0; } * html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */

attr： 插入標簽屬性值

普通文字demo

青，取之于藍，而青于藍；冰，水為之，而寒于水。

css code

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

圖片滑過動畫效果

css code

#imghover li{position:relative;margin-right:20px; } #imghover a:after{content:attr(title);position:absolute;top:0;left:0;width:100%;background-color:rgba(0,0,0,0.5);line-height:30px;color:#fff;text-align:center;font-size:14px;text-shadow:-1px -1px 0 rgba(0,0,0,0.8);opacity: 0;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-ms-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease; } #imghover a:hover:after{top:50%;margin-top:-15px;opacity: 1; }

url： 使用指定的絕對或相對地址插入一個外部資源

• source.txt
• source.doc
• source.pdf
• source.jpg
• mailto:marvin

css code

#icon_list a{font-size:16px; } #icon_list a[href]:before{content:'';margin-right:5px; } #icon_list a[href$='.txt']:before{content:url(images/icon_txt.gif); } #icon_list a[href$='.pdf']:before{content:url(images/icon_pdf.gif); } #icon_list a[href$='.doc']:before{content:url(images/icon_doc.gif); } #icon_list a[href$='.jpg']:before{content:url(images/icon_pic.gif); } #icon_list a[href^="mailto:"]:before{content:url(images/icon_mailto.gif); }

string： 插入字符串

其實關于插入字符串，這個頁面結構已經應用了很多了，第一個是h2標題左邊的藍色一塊，第二個是鼠標滑過代碼區的動畫效果，第三個就是footer部分的emailto旁邊的小圖標，如果有興趣可以用firebug查看查看，這個主要說下如何應用content做計數器

css3新增的選擇器

屬性選擇器

結構偽類選擇器

增強的文本和顏色功能

文本陰影，文本換行，溢出文本

rgba色彩模式

新增的彈性盒模型

box布局

彈性布局實戰

css code

#counter li{margin-left:0;list-style:none outside none;counter-increment: title1; } #counter li:before{content:"第"counter(title1)"章：";font-size:14px;color:#f00; } #counter li li{margin-left:25px;counter-increment: title2; } #counter li li:before{content:counter(title1)"."counter(title2); }

關于content計數器的應用可以參考這兩篇文章CSS Counters – The Right Way to Organize Your Ordered Content，CSS content, counter-increment 和 counter-reset詳解

插入特殊字符

在這篇文章的最后，說下如何在content里面插入特殊字符，關于特殊字符可以參考這里：html特殊字符，請先查閱其實用方法，即第一列為符號；第二列為html中使用的，需在前面加上&#；第三排css中可以使用，不過需要反斜杠\轉義。下面實例操作下

• css3新增的選擇器
• 增強的文本和顏色功能
• 新增的彈性盒模型
• copyright

css code

#special li:before, #special li:after{color:#f00; } #special li:nth-child(2n+1):before{color:#ccc; } #special li:first-child:before, #special li:first-child:after{content:"\25ba"; } #special li:first-child:after{-webkit-transform:scale(-1);-moz-transform:scale(-1);-ms-transform:scale(-1);-o-transform:scale(-1);transform:scale(-1); } #special li:nth-of-type(2):before{content:"\2714"; } #special li:nth-child(3):after{content:"\00bb"; } #special li:last-of-type:before{content:"\00a9";margin-right:5px; }

注：這里順便多應用了下css3的子元素選擇器，然后對于第一的after箭頭，通過transform的scale為-1來左右調轉

更多資料

• Pure CSS GUI icons
• Awesome: 10 CSS3 box shadow experiments
• Pure CSS speech bubbles
• CSS3 ordered list styles
• CSS3 breadcrumbs
• Cool headings with pseudo-elements
• A Whole Bunch of Amazing Stuff Pseudo Elements Can Do

轉自：http://www.w3cplus.com/solution/css3content/css3content.html

轉載于:https://www.cnblogs.com/yunspider/p/3940546.html

總結

以上是生活随笔為你收集整理的【转载】css3 content 生成内容的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。