.container {
  margin: 0 auto;
  width: 400px;
  padding: 10px;
  border: 1px solid black;
}
h2 {
  margin: 0;
  padding: 0;
  font-family: Verdana, sans-serif;
  text-transform: uppercase;
  line-height: 1.5;
  text-align: center;
  font-size: 40px;
}
h2 > span {
  background-color: #D32;
  color: #FFF;
  box-shadow: -10px 0px 0 7px #D32,
    10px 0px 0 7px #D32,
    0 0 0 7px #D32;
  box-decoration-break: clone;
}

<div class="container">
    <h2><span>A HEADLINE WITH BACKGROUND-COLOR PLUS BOX-SHADOW :3</span></h2>
</div>

Antwoord 5, autoriteit 4%

Een heel eenvoudige truc om dit te doen, is om een <span>-tag toe te voegen en daar een achtergrondkleur aan toe te voegen. Het ziet er precies zo uit als u het wilt.

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

En CSS

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

WAAROM?

<span>tag in een inline element-tag, zodat deze alleen de inhoud beslaat die het effect faket.

Antwoord 6, autoriteit 2%

EDIT: het onderstaande antwoord is in de meeste gevallen van toepassing. OP zei later echter dat ze niets anders konden bewerken dan het CSS-bestand. Maar zal dit hier laten zodat het voor anderen van nut kan zijn.

De belangrijkste overweging die anderen negeren, is dat OP heeft verklaard dat ze de HTML niet kunnen wijzigen.

Je kunt je richten op wat je nodig hebt in de DOM en vervolgens klassen dynamisch toevoegen met javascript. Stijl vervolgens zoals je wilt.

In een voorbeeld dat ik heb gemaakt, heb ik alle <p>-elementen getarget met jQuery en deze omwikkeld met een div met een klasse “gekleurd”

$( "p" ).wrap( "<div class='colored'></div>" );

Vervolgens heb ik in mijn CSS de <p>getarget en deze de achtergrondkleur gegeven en gewijzigd in display: inline

.colored p {
    display: inline;
    background: green;
}

Als je de weergave instelt op inline, verlies je een deel van de stijl die het normaal zou krijgen. Zorg er dus voor dat u zich op het meest specifieke element richt en de container zo vormgeeft dat deze bij de rest van uw ontwerp past. Dit is slechts bedoeld als een werkend uitgangspunt. Gebruik voorzichtig. Werkende demo op CodePen

Antwoord 7, autoriteit 2%

h1 is een element op blokniveau. Je zult in plaats daarvan iets als span moeten gebruiken, omdat het een inline niveau-element is (dat wil zeggen: het beslaat niet de hele rij).

In jouw geval zou ik het volgende willen voorstellen:

style.css

.highlight 
{
   background-color: green;
}

html

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

Antwoord 8, autoriteit 2%

kan html5 marktag gebruiken binnen alinea- en koptag.

<p>lorem ipsum <mark>Highlighted Text</mark> dolor sit.</p>

h1 {
    background-color:green;
    margin: 0 auto;
    width: 200px;
}

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

mark
{
    background-color: green;
}

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

h1 {
text-align: center;
background-color: green;
width: 600px;
 }

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

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

<h1 class="green-background"> Whatever text you want. </h1>

.green-background { 
    text-align: center;
    padding: 5px; /*Optional (Padding is just for a better style.)*/
    background-color: green; 
}

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

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

<h1 style="display:inline-block;text-align: center;background : red;">The Last Will and Testament of Eric Jones</h1>