參考網(wǎng)址:
http://www.w3cplus.com/css3/css-counters.html
http://www.webhek.com/css-counters
http://www.jiawin.com/css-counter-increment-counter-reset

/**
 *   ul上設(shè)置的屬性：
 *   counter-reset:[ <identifier> <integer>? ]+ | none | inherit;//標(biāo)識(shí)計(jì)數(shù)器作用域(必需且必須用于選擇器，值可以自定義）
 *      identifier:值必需，定義計(jì)數(shù)器的名稱;
 *      integer:設(shè)置或重置調(diào)用計(jì)算數(shù)器時(shí)起始值，可以是正數(shù)、零或負(fù)數(shù)。
 *      none：默認(rèn)。不能對(duì)選擇器的計(jì)數(shù)器進(jìn)行重置。
 *      inherit：規(guī)定應(yīng)該從父元素繼承 counter-reset 屬性的值。
 *      //display: none無法重置計(jì)數(shù)器；visibility: hidden，則可重置計(jì)數(shù)器
 *      //counter-reset只是定義了一個(gè)計(jì)數(shù)器標(biāo)識(shí)符，但沒有指定用到哪。換句話說，這個(gè)計(jì)數(shù)器標(biāo)識(shí)符，可以用到任何標(biāo)簽元素上。
 *      //如果要在某個(gè)標(biāo)簽上使用counter-reset聲明好的計(jì)數(shù)器，需要使用counter-increment來顯式設(shè)置
 *
 * ul>li上設(shè)置的屬性：
 *   counter-increment:[ <identifier> <integer>? ]+ | none | inherit;//標(biāo)識(shí)計(jì)數(shù)器與實(shí)際相關(guān)聯(lián)元素范圍。
 *      identifier:值必需，獲取counter-reset定義的標(biāo)識(shí)符；
 *      integer：可選，指定計(jì)數(shù)起始值，可以是正數(shù)、零或負(fù)數(shù)；如果未指定任何值，則該值為1（前提是counter-reset未顯式設(shè)置計(jì)數(shù)的起始值）。其值遞增是按倍數(shù)值遞增，如果設(shè)置了值為2,后面元素遞增值為4、6、8，依此類推
 *      none:默認(rèn)。選擇器無計(jì)數(shù)器增量。
 *      inherit: 規(guī)定應(yīng)該從父元素繼承 counter-increment 屬性的值。
 *      //每遇到一個(gè)符合條件li元素，counter-increment就會(huì)被調(diào)用一次，計(jì)數(shù)就是增加1。
 *      //display: none無法增加計(jì)數(shù)；visibility: hidden，則可增加計(jì)數(shù)
 *
 * ul>li:before上設(shè)置的屬性：
 *   content:string|url|counter(name)|counter(name, list-style-type)|counters(name, string)|counters(name, string, list-style-type)|attr(X)|open-quote|close-quote|no-open-quote|no-close-quote;
 *    //調(diào)用定義好的計(jì)數(shù)器標(biāo)識(shí)符
 *   //counter()命令還可以接受第二個(gè)參數(shù)，兩參數(shù)之間使用逗號(hào)(,)來分隔,當(dāng)作同時(shí)計(jì)算多個(gè)元素時(shí)數(shù)據(jù)的分隔符
 *   //第一個(gè)參數(shù)是counter-increment定義的屬性值<identifier>,用來告訴該文檔插入的計(jì)數(shù)器標(biāo)識(shí)符名稱是什么。
 *   //第二個(gè)是用來設(shè)置計(jì)數(shù)器的風(fēng)格，有點(diǎn)類似于list-style-type。默認(rèn)情況之下取值為十制，但你也可以重置這個(gè)樣式風(fēng)格，比如upper-roman或者upper-alpha等。
 *
 * list-style-type可設(shè)置的值：（參考網(wǎng)址：http://www.w3school.com.cn/cssref/pr_list-style-type.asp）
 * list-style-type: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | none | inherit;
 *    disc:默認(rèn)，實(shí)心圓;
 *    circle:空心圓;
 *    square:實(shí)心方塊;
 *    decimal:數(shù)字;
 *    decimal-leading-zero:0開頭的數(shù)字,如01、02、03...;
 *    lower-roman：小寫羅馬數(shù)字(i, ii, iii, iv, v, 等。
 *    upper-roman：大寫羅馬數(shù)字(I, II, III, IV, V, 等。
 *    lower-greek：小寫希臘字母(alpha, beta, gamma, 等。
 *    lower-latin：小寫拉丁字母(a, b, c, d, e, 等。
 *    upper-latin：大寫拉丁字母(A, B, C, D, E, 等。
 *    lower-alpha：小寫英文字母The marker is lower-alpha (a, b, c, d, e, 等。
 *    upper-alpha：大寫英文字母The marker is upper-alpha (A, B, C, D, E, 等。
 *    armenian：傳統(tǒng)的亞美尼亞編號(hào)方式
 *    georgian：傳統(tǒng)的喬治亞編號(hào)方式(an, ban, gan, 等。
 *    none：無標(biāo)記
 *    inherit;
 */

body{
  counter-reset: TopicalTitle;
}
section{
  width:100%;
  color:#aca277;
  font-size:4.5rem;
}
section h1{
  display:inline-block;
  border-bottom: 2px solid #7f632e;
  position:relative;
  counter-increment: TopicalTitle;
}
section h1:before{
  content: counter(TopicalTitle, upper-alpha);
  font-size:8.125rem;
  color:#8d6c3b;
  margin-right:2rem;
}