<div class="languages">  
   <div class="input-wrapper">
      <input id="foo" type="checkbox"><label for="foo">foo</label>
   </div>
   <div class="input-wrapper">
      <input id="bar" type="checkbox"><label for="bar">bar</label>
   </div>
   <div class="input-wrapper">
      <input id="piyo" type="checkbox"><label for="piyo">piyo</label>
   </div>
   <div class="input-wrapper">
      <input id="hoge" type="checkbox"><label for="hoge">hoge</label>
   </div>
   <div class="input-wrapper">
      <input id="huga" type="checkbox"><label for="huga">huga</label>
   </div>
</div>  
<p class="total">  
  現在
</p>  

<hr>
by:<a href="https://codepen.io/adamlaki/pen/f1ce9eef0a19069b883da8ec855e4b71">https://codepen.io/adamlaki/pen/f1ce9eef0a19069b883da8ec855e4b71</a>
body {
	margin: 20px;
	background: #efefef;
}

.input-wrapper {
	margin-right: 20px;
	margin-bottom: 10px;
	display: inline-block;
}

input {
	margin-right: 5px;
}

.languages {
	counter-reset: characters;
}
input:checked {
	counter-increment: characters;
}
.total:after {
	content: counter(characters)"個の項目をチェックしています";
}
Rerun