word-count-update.html 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738
  1. <style>
  2. .customized-counter__color-box {
  3. --hue: 180;
  4. width: 20px;
  5. height: 20px;
  6. background-color: hsl( var( --hue ), 100%, 50% );
  7. display: inline-block;
  8. }
  9. .customized-counter {
  10. border: 3px solid #333;
  11. padding-left: 5px;
  12. margin-bottom: 15px;
  13. }
  14. .customized-counter > div {
  15. display: inline-block;
  16. width: 50%;
  17. margin-left: 0;
  18. margin-right: 0;
  19. }
  20. </style>
  21. <div id="demo-editor-update">
  22. <p>A <strong>black hole</strong> is a region of <a href="https://en.wikipedia.org/wiki/Spacetime">spacetime</a> exhibiting <a href="https://en.wikipedia.org/wiki/Gravitation">gravitational</a> acceleration so strong that nothing—no <a href="https://en.wikipedia.org/wiki/Particle">particles</a> or even <a href="https://en.wikipedia.org/wiki/Electromagnetic_radiation">electromagnetic radiation</a> such as <a href="https://en.wikipedia.org/wiki/Light">light</a>—can escape from it.<a href="https://en.wikipedia.org/wiki/Black_hole#cite_note-6">[6]</a> The theory of <a href="https://en.wikipedia.org/wiki/General_relativity">general relativity</a> predicts that a sufficiently compact <a href="https://en.wikipedia.org/wiki/Mass">mass</a> can deform <a href="https://en.wikipedia.org/wiki/Spacetime">spacetime</a> to form a black hole.</p>
  23. </div>
  24. <div class="customized-counter">
  25. <div class="customized-counter__words">
  26. <label>Words:
  27. <progress value="42" max="100"></progress>
  28. </label>
  29. </div>
  30. <div class="customized-counter__characters">
  31. Characters:
  32. <div class="customized-counter__color-box"></div>
  33. </div>
  34. </div>