JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<div class="files">
  <div class="file"><input type="checkbox" value="File 1"></div>
  <div class="file"><input type="checkbox" value="File 2"></div>
  <div class="file"><input type="checkbox" value="File 3"></div>
  <div class="file"><input type="checkbox" value="File 4"></div>
  <div class="file"><input type="checkbox" value="File 5"></div>
  <div class="file"><input type="checkbox" value="File 6"></div>
  <div class="file"><input type="checkbox" value="File 7"></div>
  <div class="file"><input type="checkbox" value="File 8"></div>
  <div class="file"><input type="checkbox" value="File 9"></div>
  <div class="file"><input type="checkbox" value="File 10"></div>
</div>
<hr>
<div id="result"> Выбрано файлов </div>

CSS

input::after {
  white-space: nowrap;
  content: attr(value) ".txt";
  padding-left: 20px;
}

.files {
  overflow: hidden;
  counter-reset: files;
}

.file {
  float: left;
  width: 100px;
  margin: 2px;
  padding: 5px;
  border: 1px solid #ccc;
}

input[type=checkbox]:checked { counter-increment: files }

#result::after { content: counter(files) }
#result::before { content: " 📂" }

JavaScript

console.clear();

var count = document.querySelector('#result');

var c = getComputedStyle(count,"::after").getPropertyValue("content");



console.log( c );