title: Make border-bottom span width of center aligned text
body: <p>I want my <code>p</code> text to have a dotted line beneath it that spans the width of the text, I would also like the <code>p</code> to be centered horizontally.</p>
  
  <p>The text never be longer than one line but it will vary in length on that line (if it was totally fixed, I could solve this easily).</p>
  
  <p>I can't quite figure out the solution. I have the following structure:</p>
  
  <pre><code>&lt;div class="container"&gt;
  
      &lt;div class="content"&gt;
  
          &lt;p&gt;This is the title&lt;/p&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>In my CSS, I have something like this:</p>
  
  <pre><code>        .container      {
                      width: 650px;
                      height: 100px;
                      }
  
      .content    {
                      text-align: center;
                      text-transform: uppercase;
                      font-size: 26px;
                      color: #4D4D4D;
                      }
  
          p           {
                      border-bottom: #808080;
                      border-bottom-width: thin;
                      border-bottom-style: dotted;            
                      }
  </code></pre>