Biegral Blog

参考：CSS之before, after伪元素特性表现两则

先上图：

[html]

<div class='ice-div'>
  <strong>一、下面冰淇淋你吃过几个？</strong>
  <ol>
    <li>
      <input type="checkbox" id="icecream1">
      <label for="icecream1">哈根达斯</label>
    </li>
    <li>
      <input type="checkbox" id="icecream2">
      <label for="icecream2">和路雪wall's</label>
    </li>
    <li>
      <input type="checkbox" id="icecream3">
      <label for="icecream3">八喜冰淇淋</label>
    </li>
  </ol>
  你总共选择了 <strong class="ice-total"></strong> 款冰淇淋！
</div>

<br/>

<div class='drink-div'>
  <strong>二、你经常饮的饮料？</strong>
  <ol>
    <li>
      <input type="checkbox" id="drink1">
      <label for="drink1">果汁</label>
    </li>
    <li>
      <input type="checkbox" id="drink2">
      <label for="drink2">汽水</label>
    </li>
    <li>
      <input type="checkbox" id="drink3">
      <label for="drink3">啤酒</label>
    </li>
  </ol>
  你总共选择了 <strong class="drink-total"></strong> 款饮料！
</div>

body {
  counter-reset: icecream drink;  /*初始化变量: icecream 和 drink*/
}

.ice-div input:checked {
  counter-increment: icecream;
}


.ice-total::after {
  content: counter(icecream);
}

.drink-div input:checked {
  counter-increment: drink;
}

.drink-total::after {
  content: counter(drink);
}