: Determine content length to have a dynamic hr tag 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

@Cugini213

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

Vote Up Vote Down

@Moriarity557

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.

Vote Up Vote Down

@Carla537

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.

Vote Up Vote Down