<mark>标签与背景颜色帮助我。

输入:

<p>
    Effective <mark style="background-color: light-gray">Nov 1, 2022</mark> We will be lowering our price.
</p>

输出: 自2022年11月1日起，我们将降低价格。

Ref

H1是块级元素。你需要使用像span这样的东西，因为它是一个内联级元素(即:它不跨越整行)。

针对你的情况，我建议如下:

style.css

.highlight 
{
   background-color: green;
}

html

<span class="highlight">only the text will be highlighted</span>

一个非常简单的技巧是添加一个<span>标记，并为其添加背景色。它会变成你想要的样子。

<h1>  
    <span>The Last Will and Testament of Eric Jones</span>
</h1> 

和CSS

h1 { text-align: center; }
h1 span { background-color: green; }

WHY?

<span>标记在一个内联元素标记中，因此它将只跨越伪造效果的内容。

HTML

<h1>
  <span>
    inline text<br>
      background padding<br>
      with box-shadow
  </span>
</h1> 

Css

h1{
  font-size: 50px;
  padding: 13px; //Padding on the sides so as not to stick.


  span {  
    background: #111; // background color
    color: #fff;
    line-height: 1.3; //The height of indents between lines.
    box-shadow: 13px 0 0 #111, -13px 0 0 #111; // Indents for each line on the sides.
  }
}

codeen上的演示

很容易:

<p>lorem ibsum....</p>

样式:

p{
    background-color: #eee;
    display: inline;
}

背景设置为元素的整体大小; 从这里修改内联元素和块元素之间的区别

试试这个:

h1 {
    text-align: center;
    background-color: green;
    visibility: hidden;
}

h1:after {
    content:'The Last Will and Testament of Eric Jones';
    visibility: visible;
    display: block;
    position: absolute;
    background-color: inherit;
    padding: 5px;
    top: 10px;
    left: calc(30% - 5px);
}

请注意，calc并不兼容所有浏览器:)只是想与原始帖子中的对齐方式保持一致。

https://jsfiddle.net/richardferaro/ssyc04o4/