Is there any way to style the tagline to display a certain way on the homepage?

You could add the second part of your tagline via using the :after selector and then style it to your liking:

#header-branding .header-description:after {
    content: "second part of tagline";
    font-weight: bold;
}

Let me know how you get on with that!

That kind of works. The issue is then my tagline either doesn’t show up completely in the Title tag or if I add a : before selector to the CSS, the whole tagline shows up twice. And if I hide it in the Customizer, it doesn’t show up at all. Thoughts?

@megan.bares: Can you please share a link to your site so that I can gain a better understanding of the issue? I based the above CSS on the theme’s demo site.

sure! it’s https://www.815catholic.com

@megan.bares: Can you clarify what you’re trying to achieve? i.e. Would you like to only style one word in the RE-ENGAGE. RESPOND. RECLAIM tagline?

The snippet I provided will allow you to add an extra second part to the tagline that you can style. The text will only be repeated if you enter it both into the snippet and the tagline field in Appearance > Customize.

I don’t fully understand the issues you mentioned and clarifying your end goal may help me with that.

Thanks!

i still want the tagline to show in the browser title, so if i remove it, it will erase. so how i keep the page title and style the snippet?

Ah, I see what you mean now! Thank you so much for clarifying.

You could use a plugin, such as Yoast SEO, to manually set the title that appears in the browser tab. This would then enable you to use the custom CSS for styling different parts of your site’s description.