DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS3基礎 >> 4.7 ::before和::after選擇器
4.7 ::before和::after選擇器
編輯:CSS3基礎     

一、::before和::after選擇器

在CSS3中,我們可以使用::before和::after這兩個選擇器在元素前面或後面添加內容。這兩個選擇器常和"content屬性"配合使用,使用的場景最多的就是清除浮動和創建小圖標。

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
    <title>CSS3 ::before和::after選擇器</title>
    <style type="text/css">
        div::before
        {
            content:" 學習網";
        }
    </style>
</head>
<body>
    <div>CSS3教程</div>
</body>
</html>

在浏覽器預覽效果如下:

分析:

::before和::after這兩個選擇器都是配合content屬性在元素之前或之後插入內容、圖片、多媒體等。這2個選擇器非常有用,甚至可以用來設計各種小圖標:

上面小圖標就是用::before和::after這兩個選擇器實現的,純CSS喔,感覺很牛逼吧!有機會我們再在CSS3進階教程給大家詳細講解一下。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved