title: Size Element to String that is not the Content
body: <p>I have a button (<code>&lt;span&gt;</code>) that has text in the format <code>Options (3)</code>. The number can change, and the worst case will be <code>Options (99)</code>.</p>
  
  <p>Is there a way to have the minimum width of this span be sized according to my worst-case so the layout doesn't change when the number changes?</p>
  
  <p>My current approach is </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>span {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
  }
  
  span::after {
    display: inline-block;
    white-space: pre;
    height: 0;
    visibility: hidden;
    content: attr(data-min-string-width);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span data-min-string-width="Options (99)" style="background: red"&gt;
    Options
  &lt;/span&gt;
  &lt;br&gt;
  &lt;span data-min-string-width="Options (99)" style="background: lime"&gt;
    Options (1)
  &lt;/span&gt;
  &lt;br&gt;
  &lt;span data-min-string-width="Options (99)" style="background: cyan"&gt;
    Options (99)
  &lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Does anybody have something nicer?</p>