CSS To Add Underline After Header Content

Question

Problem

I am working on a project to theme a website, but I am not allowed to change the HTML or JavaScript. I can only update the CSS stylesheet and add/update images.

Requrements

• I need to style a h3 tag to have an underline/border after the content.
• This h3 will be used multiple times on the page, so the conent length can vary
• The solution needs to be cross-browser (IE 6/7/8, FF 3, & Safari)

Sample Code

<div class="a">
   <div class="b"><!-- etc --></div>
   <div class="c">
      <h3>Sample Text To Have Line Afterwards</h3>
      <ul><!-- etc --></ul>
      <p class="d"><!-- etc --></p>
   </div>
</div>

Sample Output

Sample Text to Have Line Afterwards ______________________________________

Another Example __________________________________________________________

And Yet Another Example __________________________________________________

Notes

• I think #sample:after { content: "______"; } option wouldn't work since that would only be the correct length for one of the tags
• I tried a background-image, but if it gave me problems if I gave it one with a large width
• Using text-indent didn't see to give me the effect I was looking for
• I tried a combination of border-bottom and text-decoration: none, but that didn't seem to work either

Any ideas would be much appreciated!

Answer 1

try attaching a background image to class c of a repeating underline, then add a background color to the h3 to match the background of the container. I believe that you would have to float the h3 left in order to get the width to collapse. does that make sense?

.c {
    background: #ffffff url(underline.gif) left 20px repeat-x;
}
.c h3 {
    margin: 0;
    padding: 0 0 2px 0;
    float: left;
    font-size: 20px;
    background: #ffffff;
}

Answer 2

h3:after {
  content: '___________';
}

Answer 3

Paolo has it, here's a link to a restaurant menu example

Answer 4

 H3 {
    border: 1px solid red;
    border-width: 0 0 1px 0;
    text-indent: -60px;
 }

You need to know the width of the text, but works pretty well.

Answer 5

The only solution I've imagined so far is to make a PNG or GIF image, with 1px height and a very large width (depends on your project, could be like 1x2000px), and do something like this:

h3#main-title { background: url(line.png) no-repeat bottom XYZem; }

where the XYZ you'd set manually, for each title, in 'em' units. But I can't figure out a 100% dynamic solution for this one, without using JS or adding extra markup.

Answer 6

This will work if class 'c' is always the parent of the h3...

.c {
    position: relative;
    margin-top: 25px;
    border-top: 1px solid #000;
    padding: 0px;
}
h3 {
    font-size:20px;
    margin-top: 0px;
    position: absolute;
    top: -18px;
    background: #fff;
}

It lets the container have the border, then uses absolute positioning to move the h3 over it, and the background color lets it blot out the portion of c's border that it's covering.

Answer 7

this worked for me

        div.c
        {
        background-image:url(line.gif);background-repeat:repeat-x;width:100%;height:20px;
        }
        div.c h3
        {
        height:20px;background-color:white;display:inline;
        }

you make the div the width of your content

then you set the background of the h3 to the background of your page. this will then overlap the background imageof the full div. You might want to play with background positioning depending on your image

Answer 8

Here's a better answer:

 .c {
    background: url('line.png') repeat-x 0 20px;
 }
 H3 {
    background-color: white;
    display: inline;
    position: relative;
    top: 1px;
 }

Use a small, 1px height, couple px wide image as your underline and occlude it with a background color on your H3.

Answer 9

.c h3 { display: inline; background-color: white; margin: 0; padding: 0; line-height: 1em; }
.c ul { margin-top: -1px; border-top: 1px solid; padding-top: 1em; /* simulate margin with padding */ }

http://besh.dwich.cz/tmp/h3.html

Answer 10

Can you pad content in the UL tags? If so, this might work:

h3 { display: inline; margin: 0; padding: 0 10px 0 0; float: left;}
ul { display: inline; border-bottom: 1px solid black; }

Answer 11

check source code of: http://nonlinear.cc/lab/friends/elijahmanor.html

then again i have NO IDEA how to control the end of the line.

Answer 12

Assuming that you're working with dynamic content, the best I could suggest is to accept graceful degradation and use a mix of great_llama and Bohdan Ganicky

Imagine:

A long title that will wrap to two lines___________________ 
and leave you like this in great_llama's solution

and nothing appearing at all with Bohdan Ganicky's solution if ul isn't immediate preceded by ul.

Solution:

.c h3 { display: inline; background-color: white; margin: 0; padding: 0; line-height: 1em; }
.c + * { margin-top: -1px; border-top: 1px solid; padding-top: 1em; /* simulate margin with padding */ }

We care about IE6, but accept that this is an aesthetic touch and IE6 users will not suffer. If you can't get the designer to accept this AND you can't alter the HTML, then do something else (before you find another job ;))