Create partial underline under headers using CSS

Here is an example of what I mean: http://creativetechs.com/tipsblog/small-business/ this website has partial, small green underlines under the title and under the "recent tips" part

How would I achieve this through code on my website?

Ideally I would like to be able to control the length of the line, weight and the distance it appears from the heading for example Heading 1 will require a thicker, denser line. Heading 2 would require a lighter smaller version of this line to match the text

How would I achieve this?

Thanks

I think you'll need to modify the HTML which you can't do with CSS but might be able to with JavaScript / JQuery.

I'd suggest modifying your question title to ask for a JavaScript / JQuery solution rather than CSS and modifying your tags to be JavaScript and JQuery. This may get your question noticed by a user with expertise in those languages.

The partial underline is created using css like octopus had mentioned. The easiest way is to create an :after element in css targeting the heading you are trying to style. For example if you want to apply it to all h1's then you would do:

h1:after {
   background: none repeat scroll 0 0 #HEXCOLOR;
   bottom: -10px;
   content: "";
   display: block;
   height: 10px;
   position: relative;
   width: 100px;
}

Hope that helps

Thanks! would this work accross all browsers too? i.e you expereince anything untoward?

How about on mobile or tablets?

Thanks!