Highlighted text with padding and line breaks

[imryanalexander (Ryan Alexander)]

I’m trying to achieve a highlighted text effect but still be able to modify the padding to give enough space around the text and the edge of the highlighted box.

I want to create something that looks like the image below but have not been able to do so.

I’ve tried adding a text span to the text and then changing the background color, that seems to work fine but the highlight is way too tight around the text and I can only modify the padding on the left and right. When I change the text span to block or inline-block, I can modify the top and bottom padding but there are no breaks between the lines, just one solid background for the entire text box.

What I’m getting currently looks like this.

Any advice is greatly appreciated! Thanks in advance.

Here is the site Read-Only link: Webflow - DECA Direct

[_Chris (topher)]

Hi Ryan,

You can accomplish this by adding three headings or three text blocks instead of a single text span.

Hope this helps!

[imryanalexander (Ryan Alexander)]

Thanks for the help - the headlines will eventually be linked from article titles from a CMS library. So the title will always be changing lengths and the highlight box will need to adapt based on the text length. So basically we want the text to wrap automatically if needed instead of just putting the three text blocks if that makes sense?

[_Chris (topher)]

Ah… I see what you’re saying. No luck man, sorry.