Add percentage text to progress bars

Note we require extra <span> tags because the <progress> tag is an empty
tag (like <img>), and so it can't have ::before or ::after
pseudo-elements. There's a workaround for that, but currently it only
works on Chrome.

For some reason, the text seems to be slightly misaligned vertically in
all implementations I've tried. So the `top: -0.1rem` rule is a hack to
align it properly.

app/assets/stylesheets/milestones.scss

@@ -25,6 +25,21 @@
     }
   }
 
+  [data-text] {
+    display: block;
+    font-weight: bold;
+    position: relative;
+
+    &::after {
+      content: attr(data-text);
+      left: 0;
+      position: absolute;
+      text-align: right;
+      top: -0.1rem;
+      width: 100%;
+    }
+  }
+
   progress {
     $background-color: #fef0e2;
     $progress-color: #fea230;