I’m trying to achieve something like the image below, where the line around the text is actually a Lottie animation that is always relative to the first word in the heading. If the word changes, the Lottie animation should grow/shrink in width along with it. For SEO purposes, the heading needs to be a single H1. That’s why I’m thinking it needs to be relative to a span, but of course you can’t drop a Lottie animation into a header element.
I’ve tried wrapping the Lottie animation and the heading in a div that is position: relative and positioning the animation absolute, but it’s not reliably lined up with the text at every screen size within breakpoints since the text is center aligned.
What it should look like on desktop
What it should look like on mobile
