Я хочу, чтобы зеленый фон находился сразу за текстом, а не составлял 100% ширины страницы. Вот мой текущий код:

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

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

Поместите текст во встроенный элемент , например <span>.

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

Затем примените цвет фона к встроенному элементу.

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

Встроенный элемент такой же большой, как и его содержимое, так что это должно сделать это за вас.

Опция 1

display: table;

• родитель не требуется

h1 {
    display: table; /* keep the background color wrapped tight */
    margin: 0px auto 0px auto; /* keep the table centered */
    padding:5px;font-size:20px;background-color:green;color:#ffffff;
}

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

скрипка

http://jsfiddle.net/J7VBV/293/

Больше

display: table сообщает элементу, что он должен вести себя как обычная таблица HTML.

Подробнее об этом на w3schools , CSS Tricks и здесь

Вариант 2

display: inline-flex;

• требует text-align: center;от родителей

.container {
    text-align: center; /* center the child */
}
h1 {
    display: inline-flex; /* keep the background color wrapped tight */
    padding:5px;font-size:20px;background-color:green;color:#ffffff;
}

<div class="container">
  <h1>The Last Will and Testament of Eric Jones</h1>
</div>

Вариант 3

display: flex;

• требуется гибкий родительский контейнер

.container {
  display: flex;
  justify-content: center; /* center the child */
}
h1 {
    display: flex;
    /* margin: 0 auto; or use auto left/right margin instead of justify-content center */
    padding:5px;font-size:20px;background-color:green;color:#ffffff;
}

    <div class="container">
      <h1>The Last Will and Testament of Eric Jones</h1>
    </div>

около

Вероятно, самое популярное руководство по Flexbox, на которое я постоянно ссылаюсь, находится на сайте CSS Tricks.

Вариант 4

display: block;

• требуется гибкий родительский контейнер

.container {
  display: flex;
  justify-content: center; /* centers child */
}
h1 {
    display: block;
    padding:5px;font-size:20px;background-color:green;color:#ffffff;
}

<div class="container">
  <h1>The Last Will and Testament of Eric Jones</h1>
</div>

Вариант 5

::before

• требует ввода слов в файл css (не очень практично)

h1 {
    display: flex; /* set a flex box */
    justify-content: center; /* so you can center the content like this */
}

h1::before {
    content:'The Last Will and Testament of Eric Jones'; /* the content */
    padding: 5px;font-size: 20px;background-color: green;color: #ffffff;
}

<h1></h1>

скрипка

http://jsfiddle.net/J7VBV/457/

около

Подробнее о псевдоэлементах css :: before и :: after в CSS Tricks и псевдоэлементах в целом на w3schools

Вариант 6

display: inline-block;

• центрирование с position: absoluteиtranslateX

• требуется position: relativeродитель

.container {
  position: relative; /* required for absolute positioned child */
}
h1 {
  display: inline-block; /* keeps container wrapped tight to content */
  position: absolute; /* to absolutely position element */
  top: 0;
  left: 50%; /* part1 of centering with translateX/Y */
  transform: translateX(-50%); /* part2 of centering with translateX/Y */
  white-space: nowrap; /* text lines will collapse without this */
  padding:5px;font-size:20px;background-color:green;color:#ffffff;
}

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

около

Подробнее о центрировании transform: translate();(и центрировании в целом) в этой статье о трюках CSS.

Вариант 7

text-shadow: а также box-shadow:

• не то, что искал OP, но, возможно, поможет другим найти свой путь здесь.

h1, h2, h3, h4, h5 {display: table;margin: 10px auto;padding: 5px;font-size: 20px;color: #ffffff;overflow:hidden;}
h1 {
    text-shadow: 0 0 5px green,0 0 5px green,
                 0 0 5px green,0 0 5px green,
                 0 0 5px green,0 0 5px green,
                 0 0 5px green,0 0 5px green;
}
h2 {
    text-shadow: -5px -5px 5px green,-5px 5px 5px green,
                  5px -5px 5px green,5px 5px 5px green;
}
h3 {
    color: hsla(0, 0%, 100%, 0.8);
    text-shadow: 0 0 10px hsla(120, 100%, 25%, 0.5),
                 0 0 10px hsla(120, 100%, 25%, 0.5),
                 0 0 10px hsla(120, 100%, 25%, 0.5),
                 0 0 5px hsla(120, 100%, 25%, 1),
                 0 0 5px hsla(120, 100%, 25%, 1),
                 0 0 5px hsla(120, 100%, 25%, 1);
}
h4 { /* overflow:hidden is the key to this one */
    text-shadow: 0px 0px 35px green,0px 0px 35px green,
                 0px 0px 35px green,0px 0px 35px green;
}
h5 { /* set the spread value to something larger than you'll need to use as I don't believe percentage values are accepted */
  box-shadow: inset 0px 0px 0px 1000px green;
}

<h1>The First Will and Testament of Eric Jones</h1>
<h2>The 2nd Will and Testament of Eric Jones</h2>
<h3>The 3rd Will and Testament of Eric Jones</h3>
<h4>The Last Will and Testament of Eric Jones</h4>
<h5>The Last Box and Shadow of Eric Jones</h5>

скрипка

https://jsfiddle.net/Hastig/t8L9Ly8o/

Больше вариантов

Есть несколько других способов добиться этого, комбинируя различные параметры отображения и методы центрирования, указанные выше.

Немного поздно в игру, но подумал, что добавлю свои 2 цента ...

Чтобы избежать добавления дополнительной разметки к внутреннему диапазону, вы можете изменить <h1>свойство display с blockна inline(уловка в том, что вы должны обеспечить элементы после <h1>элементов блока are.

HTML

<h1>  
The Last Will and Testament of
Eric Jones</h1> 
<p>Some other text</p>

CSS

h1{
    display:inline;
    background-color:green;
    color:#fff;
}

Результат

JSFIDDLE http://jsfiddle.net/J7VBV/

Очень простой трюк - добавить <span>тег и добавить к нему цвет фона. Он будет выглядеть именно так, как вы этого хотите.

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

И CSS

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

ЗАЧЕМ?

<span> во встроенном теге элемента, поэтому он будет охватывать только контент, имитирующий эффект.

РЕДАКТИРОВАТЬ: ответ ниже применим в большинстве случаев. OP, однако, позже упомянул, что они не могут редактировать ничего, кроме файла CSS. Но оставим это здесь, чтобы оно могло быть полезно другим.

Основное соображение, которым пренебрегают другие, заключается в том, что OP заявил, что они не могут изменять HTML.

Вы можете настроить таргетинг на то, что вам нужно в DOM, а затем динамически добавлять классы с помощью javascript. Затем укладывайте так, как вам нужно.

В примере, который я сделал, я нацелил все <p>элементы с помощью jQuery и обернул его в div с классом «цветной».

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

Затем в моем CSS я нацелился на <p>и дал ему цвет фона и изменил наdisplay: inline

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

Установив отображение на встроенном, вы теряете часть стиля, который он обычно унаследовал. Поэтому убедитесь, что вы нацеливаетесь на самый конкретный элемент и стилизуете контейнер, чтобы он соответствовал остальной части вашего дизайна. Это всего лишь рабочая отправная точка. Используйте осторожно. Рабочая демонстрация на CodePen

Как отмечается в других ответах, вы можете добавить background-colorк <span>своему тексту, чтобы это работало.

В случае, если у вас есть line-height, вы увидите пробелы. Чтобы исправить это, вы можете добавить box-shadowнемного увеличения к вашему диапазону. Вы также захотите, box-decoration-break: clone;чтобы FireFox правильно его отображал.

РЕДАКТИРОВАТЬ: Если у вас возникают проблемы в IE11 с box-shadow, попробуйте добавить outline: 1px solid [color];также только для IE.

Вот как это выглядит в действии:

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

можно использовать html5 знак тег в пункте и заголовок тега.

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

h1 - это элемент блочного уровня. Вместо этого вам нужно будет использовать что-то вроде span, поскольку это элемент встроенного уровня (то есть: он не охватывает всю строку).

В вашем случае я бы предложил следующее:

style.css

.highlight 
{
   background-color: green;
}

html

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

Попробуйте удалить центр выравнивания текста и отцентрировать <h1>или, <div>в котором находится текст.

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

Вы можете использовать <mark>тег HTML5 .

HTML:

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

CSS:

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

Обратите внимание, что calc совместим не со всеми браузерами :) Просто хочу, чтобы выравнивание соответствовало исходному посту.

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

Вы должны указать ширину тега h1 ..

ваш css будет таким

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

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

Демо на codepen

HTML

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

CSS

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