在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>
複製程式碼
執行效果如下:
它不是根據元素的個數來計算值的,而是根據counter-increment的數量來計算的。再看一個,稍微複雜點的示例:
<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>
複製程式碼
執行結果如下:
利用計數器來實現獲取input checked選擇的數量。
<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>
複製程式碼
執行結果如下所示:
可以手動更改counter-increment數值大小:
<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>
複製程式碼
執行結果如下:
偽元素的意義就在於它可以使HTML更加語義化。有時候為了某些效果,不得不新增一些沒有意義的標籤,而這兩個偽元素既能起到這種輔助佈局的作用,又不需要新增沒有意義的標籤。