title: how to display progress text in HTML5?
body: <p>Here is my code in HTML</p>
  
  <pre><code>&lt;progress min="0" max="100" value="10"&gt;&lt;span&gt;0&lt;/span&gt;%&lt;/progress&gt;
  </code></pre>
  
  <p>I can see the progress bar, but there is no text display. How can I make the text "10%" display on the bar without add new element?</p>
  
  <p>What I can think of right now is using extral text to overlap on the top of the progress bar, such as</p>
  
  <pre><code>&lt;progress min="0" max="100" value="10"&gt;&lt;/progress&gt;
  &lt;div&gt;&lt;span&gt;0&lt;/span&gt;%&lt;div&gt;
  </code></pre>
  
  <p>with CSS</p>
  
  <pre><code>div {margin-top: -20px}
  </code></pre>
  
  <p>I'm thinking of if there is better way to achieve it?</p>
  
  <p><a href="https://jsfiddle.net/etLv3z4b/" rel="nofollow">https://jsfiddle.net/etLv3z4b/</a></p>