Position Lottie animation relative to text span

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.

:point_up: What it should look like on desktop

:point_up: What it should look like on mobile

Hi James,

Without seeing how your project is built, would having an sr-only class for your H1 make it easier for you. That way you can have multiple text block elements to achieve your desired look but still have a dedicated H1 for SEO/Screen readers