title: How to display data label inside HTML5 progress bar? (cross-browser)
body: <p>I have a styled HTML5 progress bar for which I would like to show the data label inside the progress bar cross-browser compatible. Currently it is displayed above the progress bar.</p>
  <p><strong>HTML:</strong></p>
  <pre><code>&lt;progress max=&quot;100&quot; value=&quot;50&quot; data-label=&quot;50% Complete&quot;&gt;&lt;/progress&gt;
  </code></pre>
  <p><strong>CSS:</strong></p>
  <pre class="lang-css prettyprint-override"><code>progress {
    text-align:center;
    height: 1.5em;
    width: 100%;
    -webkit-appearance: none;
    border: none;
  }
  progress:before {
    content: attr(data-label);
    font-size: 0.8em;
    vertical-align: 0
  }
  progress::-webkit-progress-bar {
    background-color: #c9c9c9;
  }
  progress::-webkit-progress-value,
  progress::-moz-progress-bar {
    background-color: #7cc4ff;
  }
  </code></pre>
  <p>I'm getting the result below, but I'd like to move the data label <strong>inside</strong> the progress bar:</p>
  <p><img src="https://i.stack.imgur.com/LuJBE.png" alt="current rendering" /></p>