在CSS中，有兩個很好用的偽元素，分別是::before和::after。也許你在看別人的程式碼時，會看到:before和:after，那是為了相容早期的瀏覽器。W3C為了將偽類和偽元素加以區分，在偽元素前面加了兩個冒號。
1.偽元素
::before用來將內容插入到元素的前面::after用來將內容插入到元素的後面
::before和::after中有一個content()屬性用來生成內容。
<style type="text/css">
.item::before{
content : 'Hello ';
}
.item::after{
content : " world"
}
</style>
<div class="item">item</div>
複製程式碼
執行效果如下：
2.CSS計數器
CSS有一個計數功能，就像使用變數一樣，它有以下4個屬性：counter-reset 建立或重置計數器；需要注意的是：當第一次使用counter-reset時，表示建立；當第二次使用時，表示重置，但需要注意的是，是同一個元素才會重置。
counter-increment 增長計數器；
content 生成內容；
counter() 將計數器的值新增到元素中。
接下來，看一個最簡單的計數器示例：
<style type="text/css">
ul{
list-style:none;
counter-reset : num;
}
ul li::before{
counter-increment : num;
content : 'List-' counter(num) '-item ';
}
</style>
<ul>
<li>AAAAAAAA</li>
<li>BBBBBBBB</li>
<li>CCCCCCCC</li>
</ul>
複製程式碼
執行效果如下：
再看一個，稍微複雜點的示例：
<style type="text/css">
body{
counter-reset : num1;
}
h1::before{
counter-increment : num1;
content : 'The ' counter(num1) ' ';
}
h1{
counter-reset : num2;
}
h2::before{
counter-increment : num2;
content : 'content ' counter(num1) '.' counter(num2);
}
</style>
<h1>Title</h1>
<h2>這是一段內容。</h2>
<h2>這是一段內容。</h2>
<h1>Title</h1>
<h2>這是一段內容。</h2>
<h1>Title</h1>
<h2>這是一段內容。</h2>
<h2>這是一段內容。</h2>
<h2>這是一段內容。</h2>
複製程式碼
執行結果如下：
<style type="text/css">
body{
counter-reset : num;
}
input:checked{
counter-increment : num;
}
p::after{
content : counter(num) '個'
}
</style>
<body>
CSS3<input type="checkbox">
HTML5<input type="checkbox">
Javascript<input type="checkbox">
<p>你一共選擇了</p>
</body>
複製程式碼
執行結果如下所示：
<style type="text/css">
body{
counter-reset : num;
}
input:nth-of-type(1):checked{
counter-increment : num 5;
}
input:nth-of-type(2):checked{
counter-increment: num 2;
}
input:nth-of-type(3):checked{
counter-increment:num 7;
}
input:nth-of-type(4):checked{
counter-increment: num 1;
}
p::after{
content : 'Count: ' counter(num)
}
</style>
<body>
5<input type="checkbox">
2<input type="checkbox">
7<input type="checkbox">
1<input type="checkbox">
<p></p>
</body>
複製程式碼
執行結果如下：
3.content的其它用途
在content中還有兩個值：attr()插入標籤屬性值；
url()插入一個外部資源(圖片，音訊，視訊或瀏覽器支援的其它任何資源)。
<style type="text/css">
.box a{
position:relative;
}
.box a img{
width:200px;
}
.box a::after{
content : attr(title);
position:absolute;
bottom:0;
left:0;
width:100%;
height:25px;
line-height:25px;
text-align:center;
background-color:#ccc;
color:#fff;
}
</style>
<body>
<div class="box">
<a href="javascript:;" title="這是一個logo">
<img src="images/logo.png">
</a>
</div>
</body>
複製程式碼
執行結果如下：
