Коротко: фон под текстом делают свойством background-color у строчного элемента (span) — тогда фон «обтягивает» только текст, а не всю строку. Для многострочного текста важен box-decoration-break. Ещё варианты: градиент-маркер, background-clip: text (текст-градиент) и псевдоэлемент для подсветки.
Главное отличие
| Что красим | Результат |
|---|---|
p { background: … } |
фон на всю ширину блока |
span { background: … } |
фон только под текстом |
mark { … } |
подсветка «как маркер», семантично |
Вкладки: способы сделать фон под текстом
p .hl {
background: #ffe58a;
padding: 2px 4px;
border-radius: 3px;
}Оберните нужный фрагмент в span с классом. Фон ляжет только под текст. padding добавит «воздуха», border-radius сделает мягкие края.
.hl {
background: #ffe58a;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
padding: 2px 4px;
}Если выделенный текст переносится на новую строку, без этого свойства левый и правый padding применяются только к началу и концу целого фрагмента. clone повторяет отступы на каждой строке.
mark {
background: #ffe58a;
color: inherit;
padding: 0 3px;
}Тег mark изначально означает «выделенный текст» и полезен и для SEO, и для доступности. Уберите жёлтый по умолчанию и задайте свой цвет.
.grad {
background: linear-gradient(90deg, #003F8F, #992222);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}Это обратный приём: не фон под текстом, а текст «залит» градиентом. Работает в современных браузерах.
Подсветка через псевдоэлемент
Если нужно, чтобы полоса шла не строго по тексту, а «с выходом» за края, используйте псевдоэлемент:
.mark-hl { position: relative; }
.mark-hl::before {
content: "";
position: absolute;
left: -4px; right: -4px;
top: 20%; bottom: 20%;
background: rgba(255, 229, 138, .7);
z-index: -1;
}Так делают «маркерную» подсветку, которая заезжает за текст с обеих сторон.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Фон на всю ширину | фон у блочного элемента | красить span |
| Отступы только по краям строки | нет box-decoration-break |
добавить clone |
| Фон «уехал» под текст | нет z-index: -1 |
поставить отрицательный слой |
| Текст не виден | плохой контраст | изменить цвет текста |
Проверьте себя
box-decoration-break: clone?
Вопросы и ответы
mark семантичен для «выделенного» текста. span универсален и подходит для любого оформления. Оба красят фон только под текстом.
Псевдоэлементом ::before с отрицательными left/right и z-index: -1 под текстом.
Да, background-image у span тоже работает, но с несколькими строками ведёт себя нестабильно. Для картинки-подложки лучше псевдоэлемент с растяжением.
Через linear-gradient с позицией внизу или text-decoration с толщиной и цветом. Часто удобнее градиент-фон нужной высоты у нижнего края.
Итоги
- Фон под текстом — свойство у строчного элемента (
span/mark). - Для переноса строк нужен
box-decoration-break: clone. - Маркерную полосу рисуют псевдоэлементом с
z-index: -1. - Всегда следите за контрастом текста и фона.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.