I want to add an SVG background to my H1 elements to act as a wavy underline. The problem is, I want this SVG to stretch to the width of the text within the H1 element. As we know, by default, all headings are block elements so they stretch to 100% width. Is there anyway to make them behave like "inline-block", whilst preventing other inline elements from positioning themselves next to the heading. In other words, is there a way I can shrink-wrap a heading, whilst still ensuring it's the only element on that line?

I'm going to a have quick play with floats, but I'll admit that floats have never solved any design problem for me. They always seem to introduce other undesirable side-effects so I'm not incredibly optimistic.

Cheers