Я не могу опустить текст с фоном, не заполняя лишние рамки [закрыто] ⇐ CSS

[Anonymous]

Нужно опустить текст вниз до того места, где должен быть фон определенного цвета, сам фон должен закрашиваться исключительно за текстом. Это должно выглядеть так:


Увы, это единственный способ:
[img]https://i.sstatic.net /pz6Oln5f.png[/img]

Или так:


Или так, но тогда вы не сможете его переместить:


То есть фон либо заполнен правильно, но его нельзя переместить на в нужном месте, или заполнено неправильно, но оно в нужном месте.
Использование полей не помогает.
CSS:
.first .price {
display: block;
padding-left: 14px;
padding-right: 14px;
padding-top: 30px;
padding-bottom: 30px;
border-radius: 10px;
border: 1px groove #C175FF;
background-color: #1D0E2D;
color: white;
}

.first .purp {
color: #C175FF;
}

HTML:





LOLKEK

9999.99
₽






Подробнее здесь: https://stackoverflow.com/questions/793 ... ra-borders