Stretching SVGs in TailwindCSS

Issue

I'm currently working on a landing page with TailwindCSS, and I'd like to add a decorative item under my headlines. I've created an SVG and used the after pseudo-element to position it under the item I want. Here's an example:

<span after:h-5 after:bg-[url('../public/svg/underline-large.svg')] after:bg-no-repeat />

However, the issue here is that I end up having to bring in longer and shorter SVGs for different headlines. Ideally I would be able to use one SVG and somehow stretch it to match the width of the title. Any idea of how to do this?

Solution

You will need some more (after:) options and a relative class, but the most important part to add this preserveAspectRatio="none" attribute to the svg.

HTML

<h1
  class="text-2xl
  relative 
  after:content-['']
  after:h-[1rem]
  after:w-full
  after:absolute
  after:bottom-[-1.2rem]
  after:left-[0]
  after:bg-[url('./underline.svg')]
  after:bg-no-repeat"
>
  Short Title
</h1>

SVG

<svg preserveAspectRatio="none" viewBox="0 0 63 8" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M5.47663 1.41505C21.2121 3.69552 49.2623 6.09008 61.691 1.41505C52.455 5.86203 35.6249 8.49799 1.14368 4.49373" stroke="#2AADD6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Answered By - Anton