Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

Is there a way to determine the length of the content contained inside an h2 element, which changes. So an hr tag can be set to the same length plus some additional width?

so it would look sort of like

I tried some psuedocode to explain what I mean. I would move this to a css rule of course

<h2>SOME RANDOM TITLE LENGTH</h2>
<hr style=width_of_H2_plus_5% />
share|improve this question

3 Answers 3

up vote 1 down vote accepted

If it's OK to use float or absolute positioning then you could try the following:

<div style="float: left; width:auto;">
   <h2>SOME RANDOM TITLE LENGTH</h2>
   <hr style="width: 110%; margin-left: -5%;"/>
</div>

Unfortunatley, I don't think width:auto works with static or relative positioning.

share|improve this answer
    
I will test this but the width would adjust to the h2 content wouldn't it? I need to extend the hr length beyond the h2 so it matches other stylized headings that are fixed, and look that way –  datatoo Mar 12 '11 at 6:02
    
I've updated the <hr> code to do that –  Ewan Heming Mar 12 '11 at 10:09
    
this does achieve what I had hoped, unfortunately they are using sifr which changes the h2 length after the hr length gets calculated. without sifr it does exactly what I wanted. Only needed the width:105% and no margin-left. Thanks –  datatoo Mar 12 '11 at 11:01

I don't believe it's possible purely with HTML & CSS. You could, however, use some JavaScript to calculate the width of your <h2> and then make your <hr>'s width <h2>'s + 5%. You can use the window.onload and window.onresize events to update the width of your <hr> as the size of the window changes.

share|improve this answer
    
@km kind of what I expected. I think you are right. I was looking at the inherited code and there is sifr which is flash running on that tag as well. So that may give the width after it completes the object. Unless someone tells me otherwise I will count this as the answer. thanks –  datatoo Mar 12 '11 at 4:14
    
I'm glad I could help you. –  Kevin Mark Mar 12 '11 at 7:26

Why not just set the h2 style to underline? H2 is a block element. The hr should be unnecessary.

share|improve this answer
    
I need the underline to go beyond the width of the h2 tag content by 5% to match styling of other elements –  datatoo Mar 12 '11 at 10:33

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.