Make only part of a html anchor clickable

Question

I'm looking for something like this

<p>This website is&nbsp;<a href="{github/link}">open source</a>. Made by ...</p>

But having all the text in one same tag/line and specify the link with css or javascript or maybe an even better html usage. I'm in react if that changes anything.

The reason I want to do this is because I am using i18next, to create a multilingual website and if I have 3 text elements (before, link and after) I unnecessarily need 3 entries to my translation json file, which when scaling up is impractical and also screams bad practice.

Think about the text as an incoming variable that needs to filter out the text to select as a link. I can only think of really dirty javascript ways of doing it, ideally I'm looking for a reusable solution.

Thanks!