css系列之before或after中content

**單冒號(:)用於CSS3僞類，雙冒號(::)用於CSS3僞元素，不過瀏覽器須要同時支持舊的已經存在的僞元素寫法，
好比:first-line、:first-letter、:before、:after等，單冒號(:)兼容性更好**

content可能的值

div::after{
    content: "普通字符串";
    content: attr(父元素的html屬性名稱);
    content: url(圖片、音頻、視頻等資源的url);
    
    /* 使用unicode字符集，採用4位16進制編碼，但不一樣的瀏覽器顯示存在差別，並且移動端識別度更差*/
    content: "\21e0";
    
    /* content的多個值能夠任意組合，各部分經過空格分隔 */
    content: "'" attr(title) "'";
    
    /* 自增計數器，用於插入數字/字母/羅馬數字編號 */
    content: counter(<identifier>, <list-style-type>);
    
    /* 以父附屬元素的qutoes值做爲content的值*/
    content: open-quote | close-quote | no-open-quote | no-close-quote;
}

插入純文字

content:"string"，或content:none不插入內容

h1::after{
    content:"h1後插入內容"
}
h2::after{
    content:none
}

字符集

<p class="phoneNumber">13900001390</p>

.phoneNumber::before{
    content:'\260E';
    font-size: 16px;
}

插入圖片

content屬性也能夠直接在元素前/後插入圖片

h3::after{
    content:url(http://ido321.qiniudn.com/wp-content/themes/yusi1.0/img/new.gif)
}

插入元素的屬性值

content屬性能夠直接利用attr獲取元素的屬性，將其插入到對應位置。

<a href="http:///www.ido321.com">這是連接&nbsp;&nbsp;</a>

a:after{
    content:attr(href);
}

計數器

counter 調用計數器，能夠不使用列表元素實現序號功能。
counter 要配合 counter-increment 和 counter-reset屬性使用。

content: counter(<identifier>, <list-style-type>);

<list-style-type>: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha

• counter-reset: [<identifier> <integer>?]，給同級元素增長計數器
  用於標識自增計數器的做用範圍，<identifier>爲自定義名稱，<integer>爲起始編號默認爲0。
• counter-increment: [<identifier> <integer>?]，增長計數器的值
  用於標識計數器與實際關聯的範圍，<identifier>爲counter-reset中的自定義名稱，<integer>爲步長默認爲1。

<h1>大標題</h1>
<h2>中標題</h2>
<h3>小標題</h3>
<h3>小標題</h3>
<h2>中標題</h2>
<h3>小標題</h3>
<h3>小標題</h3>
<h1>大標題</h1>
<h2>中標題</h2>
<h3>小標題</h3>
<h3>小標題</h3>
<h2>中標題</h2>
<h3>小標題</h3>
<h3>小標題</h3>

h1::before{
    content:counter(h1)'.';
}
h1{
    counter-increment:h1;
    counter-reset:h2;
}
h2::before{
    content:counter(h1) '-' counter(h2);
}
h2{
    counter-increment:h2;
    counter-reset:h3;
    margin-left:40px;
}
h3::before{
    content:counter(h1) '-' counter(h2) '-' counter(h3);
}
h3{
    counter-increment:h3;
    margin-left:80px;
}

qutoes

<h1>大標題</h1>

h1{
    quotes:"(" ")";  /*利用元素的quotes屬性指定文字符號*/
}
h1::before{
    content:open-quote;
}
h1::after{
    content:close-quote;
}

<h2>中標題</h2>

h2{
    quotes:"\"" "\"";  /*添加雙引號要轉義*/
}
h2::before{
    content:open-quote;
}
h2::after{
    content:close-quote;
}