IT工程師數位筆記本

本文地址：http://www.w3cplus.com/solution/css3content/css3content.html

這篇文章挺不錯的，建議看一下。

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

1. none： 不生成任何值。
2. attr： 插入標簽屬性值
3. url： 使用指定的絕對或相對地址插入一個外部資源（圖像，聲頻，視頻或瀏覽器支持的其他任何資源）
4. 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做計數器

1. css3新增的選擇器
   1. 屬性選擇器
   2. 結構偽類選擇器
2. 增強的文本和顏色功能
   1. 文本陰影，文本換行，溢出文本
   2. rgba色彩模式
3. 新增的彈性盒模型
   1. box布局
   2. 彈性布局實戰

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來左右調轉