html - CSS 突出显示文本后的中断

Question

我正在尝试在 CSS 中的文本突出显示之间添加中断(它不会在框中突出显示，而是在行结束后结束突出显示)

这是它目前的样子:

这个 block 的 CSS 是

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;
}

HTML 是:

<div class="slide-caption">
 <div class="slide-content">
    <h1><strong>COMPREHENSIVE IT SERVICES YOU CAN TRUST</strong></h1>
     </div>

    <h2 class="slide-title"> Let us help you develop an IT Optimization Strategy and Define your technological priorities </h2>

    <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;customize_messenger_channel=preview-0&amp;customize_autosaved=on" target="_self"> Learn how we can help you succeed </a>

当我添加 display: inline; 时，它打破了它，对于顶部，它完全删除了突出显示，当我为底部添加时，按钮向上移动到文本的第二段。

Answer 1

您可以使用 <mark>标记，然后只需编辑它的背景颜色。或者将您的文字包装在 <span> 中并为其添加背景。