CSS highlighting break after text

I am trying to add breaks between text highlighting in CSS (where it doesn't highlight in a box, but instead ends the highlighting after the end of the line)

This is what it currently looks like:

My CSS for this block is

h2.slide-title{
background: #89ce40;
padding: 0 0 0 !important;
line-height: 1.3;
box-decoration-break: clone;
text-transform: uppercase;
opacity: 0.9;
-webkit-box-decoration-break: clone;
-o-box-decoration-break: clone;
}
.button-medium{

background: #89ce40;

line-height: 1.3;

box-decoration-break: clone;

text-transform: uppercase;

opacity: 0.9;

-webkit-box-decoration-break: clone;

-o-box-decoration-break: clone;

}

the HTML is:

<div class=“slide-caption”>

<div class=“slide-content”>

<h1><strong>COMPREHENSIVE IT SERVICES YOU CAN TRUST</strong></h1>

</div>

&lt;h2 class="slide-title"&gt; Let us help you develop an IT Optimization Strategy and Define your technological priorities &lt;/h2&gt;

&lt;a class="slide-link button button-medium" href="http://18.205.33.160/index.php/itone-method/?customize_changeset_uuid=fde7f902-ae22-4db9-abef-fe976403cdb7&amp;amp;customize_messenger_channel=preview-0&amp;amp;customize_autosaved=on" target="_self"&gt; Learn how we can help you succeed &lt;/a&gt;

When I add display: inline; it breaks it, for the top portion it removes the highlighting entirely and when I do it for the bottom portion the button moves up into the second paragraph of text.

#html #css #wordpress