I have added a translation feature that allows users to switch paragraphs to French when clicked. Each paragraph now has the first word wrapped in a span with a CSS class that enlarges and colors the text. However, I am facing an issue where when switching from English to French, the style of the span is not applied to the French version. How can I make sure that the styling applies to the first word of every French paragraph as well?
function translate_fr(){
document.getElementById("intro").innerHTML = "At Lion Cuts, we are a cat-exclusive establishment offering a full range of services from grooming to boarding. You and your pet will be pleased to know that only professional, natural, and biodegradable products are used, ensuring no issues with sensitivities or allergies.";
}
<p id="intro">
<span class="firstWord">Here</span> at Lion Kuts we are a cat only
establishment that offers a full range of services
from complete grooming, bathing to boarding. You and
your pet will be thrilled to know that only professional,
natural and biodegradeable products are used, any
sensitivities or allergies will not be a problem.
</p>
.firstWord {
font-family: Alegreya Sans SC;
line-height: 1;
font-size: 26px;
font-weight: bold;
color: #872741;
}