1

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% />
Improve this question

3 Answers 3

Reset to default
1

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.

Improve this answer
3
  • 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, 2011 at 6:02
  • I've updated the <hr> code to do that
    – Ewan Heming
    Mar 12, 2011 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, 2011 at 11:01
1

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.

Improve this answer
2
  • @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, 2011 at 4:14
  • I'm glad I could help you.
    – Kevin Mark
    Mar 12, 2011 at 7:26
0

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

Improve this answer
1
  • 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, 2011 at 10:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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