Make border-bottom span width of center aligned text

Question

I want my p text to have a dotted line beneath it that spans the width of the text, I would also like the p to be centered horizontally.

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).

I can't quite figure out the solution. I have the following structure:

<div class="container">

    <div class="content">

        <p>This is the title</p>

    </div>

</div>

In my CSS, I have something like this:

        .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;            
                    }

Answer 1

Here: http://jsfiddle.net/DqFp7/

HTML

<div class="container">

    <div class="content">

        <p>This is the title</p>

    </div>

</div>

CSS

.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;  
    display:inline;    
}​

Answer 2

You can use text-decoration couples with text-decoration-style , although support for this feature is still somewhat poor (Aug-2018: Not supported in Safari and Edge).

It's in the spec , so it will eventually be supported.

.

Example:

 .container, .content { width: 100%; } .content p { font-size: 30px; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: red; text-align: center; } 

 <div class="container"> <div class="content"> <p>This is the title</p> </div> </div>