Stretching SVGs in TailwindCSS-CodePudding

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?

CodePudding user response：

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
  
>
  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>