Tip to create an underline on a heading shorter than the heading itself

You can use a pseudo element with :before (or :after):

h1 {
    font-weight: 300;
    display: inline-block;
    padding-bottom: 5px;
    position: relative;
}
h1:before{
    content: "";
    position: absolute;
    width: 50%;
    height: 1px;
    bottom: 0;
    left: 25%;
    border-bottom: 1px solid red;
}

http://jsfiddle.net/9e27b/


This is another solution that centers the heading, the problem here is that the underline gets shorter as the column gets shorter.

h2 {
  display: inline-block;
  padding-bottom: 15px;
  position: relative;
  width: 100% ;
  text-align: center;
}
h2:before{
    content: "";
    position: absolute;
    width: 8%;
    height: 1px;
    bottom: 0;
    left: 46%;
    border-bottom: 1px solid red;
}