Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Sign in to follow this  

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?


Edited by edokken

Share this post

Link to post

2 answers to this question

Recommended Posts

  • 1

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

Edited by edolyne

Share this post

Link to post
  • 0

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.

Share this post

Link to post
This topic is now closed to further replies.
Sign in to follow this  

  • Create New...