underline after h2

Question

I really don'know how to add an underline after a headline!

what is the best way to css the example below?

H2___

lorem lorem

Answer 1

I can't think of any way to do this without adding markup.

<h2>Lorem Ipsum<span class="post-h2"></span></h2>

And then:

.post-h2 {
    padding-left: 2em; 
    border-bottom: 1px solid black; 
}

Answer 2

On modern browsers you should be also able to do this, without useless extra markup

  h2:after {
    color: black;
    content: "___" 
  }


 <h2>Test</h2>

Answer 3

You could try using CSS's :after feature (though I haven't seen it used for this sort of thing before):

h2:after {
    content: ' ';
    border-bottom:solid black 1px; /* using border rather than underline; it's easier that way */
    width:20px; /*however long you want the underline */
    display:inline-block; /* this is required for the width parameter to work */
}

As I say, I haven't seen :after used this way before, but I've just tested the above code and it worked for me, at least in Firefox.

However note that it definitely won't work in older versions of IE, so if you need a 100% cross-browser solution, you may have to do something else (which basically means adding extra markup).

This page has more info about after: http://www.quirksmode.org/css/beforeafter.html

Answer 4

if you mean below a <h2> then just adding a border-bottom:1px solid red in your CSS should suffice.

if you mean after the heading text, then try this:

HTML

<h2 class="underline"><span>lorem ipsum</span></h2>

CSS

h2.underline { padding-right:20px; border-bottom:1px solid red; position:relative; }
h2.underline span { display:block; border-bottom:1px solid white; position:absolute; bottom:-1px } /*border color must be same as background color. assumed here to be white*/ 

Another approach that will work for browsers that support :after is to generate the "_" with CSS.

See both examples here: http://jsbin.com/uyoda5/2