Установка фона текста, не элемента, с помощью CSS

Быстрый ответ

Примените внутрь элемента <span> и используйте свойство background-color для установки фона прямо под текстом:

<p>Обычный текст <span style="background-color: #FFFF00;">подсвеченный текст</span>.</p>

Элемент <span> адаптируется под своё содержимое и действует как inline элемент, что позволяет применить фон только к тексту, не затрагивая всю область элемента.

Фон в соответствии с размером текста

Чтобы фон идеально соответствовал размерам текста, примените display: inline-block, тем самым обеспечив плотное соприкосновение с текстовым содержимым:

/* Прожекторы на тексте */
.highlight {
  background-color: #FFFF00;
  display: inline-block;
}

Если вам требуется создать однородный фон для текста, который расположен на нескольких строках, примените свойство box-decoration-break: clone:

/* Солнышко через листья – текст окрашен в жёлтые оттенки */
.multiline-highlight {
  background-color: #FFFF00;
  display: inline;
  box-decoration-break: clone;
}

Обратите внимание, что свойство box-decoration-break максимально поддерживается браузером Firefox!

Установка фона с помощью псевдоэлементов CSS

Если вам нужно установить фон, не прибегая к изменениям в HTML-коде, используйте ::before, который действует почти что волшебно:

/* Волшебное создание атмосферы */
.highlight::before {
  content: '';
  background-color: #FFFF00;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Не забывайте указывать у родительского элемента позицию relative, чтобы псевдоэлемент оставался в его пределах.

Совместимость с браузерами и доступность

Для обеспечения совместимости со старым IE11 можно использовать свойство outline в сочетании с box-shadow нулевой ширины:

/* Классика времён IE11 */
.compatible-highlight {
  color: black;
  background-color: #FFFF00;
  outline: 0px solid transparent;
  box-shadow: 0 0 0 3px #FFFF00;
}

Визуализация

Представьте ваш текст как человека, пересекающего мост, а фон – это окружающий мост пейзаж.

Фон на всю ширину:       🌉🌈🌉🌈🌉
                         🚶‍♂️ Идёт по мосту
Фон по ширине текста:       🎨
                         🚶‍♂️ Машет рукой

Задача – окаймить текст фоном, как художник, усердно подбирающий краски для своего произведения 🖌️🖼️.

Методы регулировки фона вокруг текста

Чтобы создать идеальное пространство вокруг текста, попробуйте настроить параметры line-height и box-shadow. Пример:

/* Каждому тексту нужно персональное пространство */
.shadow-spacing {
  background-color: #FFFF00;
  box-shadow: 10px 0 0 #FFFF00, -10px 0 0 #FFFF00;
  line-height: 1.5;
}

Flexbox в CSS это то же, что и йога для поддержания здорового телосложения – главное, гибкость и гармония!

/* Яркое внимание сконцентрировано в центре */
.flex-center-highlight {
  display: flex;
  justify-content: center;
  background-color: #FFFF00;
}

Используйте text-align: center, чтобы выровнять по центру текст внутри display: inline:

<!-- Цель достигнута! -->
<div style="text-align: center;">
  <span style="background-color: #FFFF00; display: inline;">Текст расположен по центру</span>
</div>

Полезные материалы

1. background-clip – CSS: Cascading Style Sheets | MDN — Документация MDN – незаменимый источник информации о свойстве background-clip.
2. A Whole Bunch of Amazing Stuff Pseudo Elements Can Do | CSS-Tricks — В этой статье вы узнаете о многих возможностях псевдоэлементов.
3. ::first-line – CSS: Cascading Style Sheets | MDN — Подробное руководство по стилизации первой строки текста.
4. CSS display property — Изучите, как правильно использовать свойство display, благодаря ресурсу W3Schools.
5. ::before | Codrops — Все, что вы хотели знать о псевдоэлементе ::before, собрано в материалах Codrops.
6. ::after | Codrops — Освойте множество возможностей псевдоэлемента ::after благодаря опыту профессионалов из Codrops. END OF ARTICLE