↗☻【伪元素】

::before
::after
::first-letter
::first-line
CSS3要求对伪元素使用两个冒号以便与伪类进行区别。但注意IE8及更低版本的IE无法识别两个冒号的语法。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        /*
         * :before IE6IE7不支持
         * :after IE6IE7不支持
         */
        .box {
            font-size: 18px;
        }
        .box:before {
            content: "【";
            color: #f00;
            font-size: 12px;
        }
        .box:after {
            content: "】"; 
            color: #0f0; 
            font-size: 12px;
        }    
        .box2:before { 
            content: normal;
        }
        .box2:after { 
            content: "";
        }    
        .box3:before {
            content: url(http://pic.29293.com/pic/4876786148061704833.jpg); 
            margin-right: 20px;
        }    
        .box4:after { 
            content: attr(id); 
            position: absolute; 
            left: 100px;
        }    
        h1, h2, h3, h4 { 
            counter-increment: mycounter;
        }
        h1:before { 
            content :"第"counter(mycounter)"章 ";
        }    
        h2:before {
            content: counter(mycounter);
        }
        h3:before { 
            content: "第"counter(mycounter,circle)"章 ";
        }
        h4:before { 
            content: "第"counter(mycounter,upper-roman)"章 ";
        }    
        h5 { 
            quotes: "(" ")";
        }
        h5:before { 
            content: open-quote;
        }
        h5:after {
            content: close-quote;
        }    
        dt { 
            counter-increment: btitle; 
            counter-reset: stitle;
        }
        dd { 
            counter-increment: stitle;
        }
        dt:before { 
            content: counter(btitle)".";
        }
        dd:before { 
            content: counter(btitle)"."counter(stitle)".";
        }
    </style>
</head>
<body>
    <div class="box box1"><span>插入内容</span></div>
    <div class="box box2">插入内容</div>
    <div class="box box3">插入内容</div>
    <div class="box box4" id="text">插入内容</div>
    <h1>大标题</h1>
    <h1>大标题</h1>
    <h2>大标题</h2>
    <h2>大标题</h2>
    <h3>大标题</h3>
    <h3>大标题</h3>
    <h4>大标题</h4>
    <h4>大标题</h4>
    <h5>大标题</h5>
    <dl>
        <dt>大标题</dt>
        <dd>小标题</dd>
        <dd>小标题</dd>
        <dt>大标题</dt>
        <dd>小标题</dd>
        <dd>小标题</dd>
        <dt>大标题</dt>
        <dd>小标题</dd>
        <dd>小标题</dd>
        <dt>大标题</dt>
        <dd>小标题</dd>
        <dd>小标题</dd>
    </dl>
</body>
</html>