Задание 100% ширины для: наведения, текстовой позиции

Question

Это может быть глупо или очень легко сделать, но я понятия не имею, как изменить положение текста, не влияя на эффект наведения (его ширина является точным размером, как его родительский div / прозрачный блок). Для лучшего понимания вот пример изображения.

1. При наведении красный номинал установлен в действие.
2. Синий блок контента идет сверху, поэтому красная полоса исчезает под ним, но, имея 100%, теперь он отображается с обеих сторон прозрачный блок.
3. Наконец, желтый блок - это место, где Навигация должна быть установлена ​​(опять же, состояние наведения не меняется)

Действительно, у меня нет идей, или, если быть более точным, без понятия о том, как это сделать. Это вообще возможно с css?

Answer 1

Если я вас правильно понимаю, я рекомендую использовать свойство padding-left css. Это не изменит ваше наведение, и если вы установите заполнение как сумму ширины синего прямоугольника + ширины его правой части, которая выходит за границы, вы получите текст там, где хотите.

Установить отступ слева от красного прямоугольника.