Jump to content

Create partial underline under headers using CSS

Recommended Posts

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?


Link to comment
  • Replies 2
  • Views 21.7k
  • Created
  • Last Reply

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.

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment

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

Link to comment


This topic is now archived and is closed to further replies.

This topic is now closed to further replies.
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.