 <p>I love pseudo elements so that's exactly what I would use here.</p> <pre><code>h1{ position:relative; } h1:after{ content:""; position:absolute; width:20%; border-top:1px solid green; bottom:0; left:40%; } </code></pre> <p>If you want the underline to be a fixed width, you'll need to use negative margins to center it.</p> <pre><code>h1:after{ content:""; position:absolute; width:100px; border-top:1px solid green; bottom:0; left:50%; margin-left:-50px; } </code></pre>