Сделайте элемент всплывающим и измените цвет фона, не сдвигая текст CSS ⇐ CSS

[Anonymous]

Основная идея заключается в том, что класс .pop-out преобразует код, чтобы изменить фон, немного всплывать за пределы экрана (масштаб и тень) и т. д. Единственная проблема в том, что в нем нет отступов. мой исходный элемент влево и вправо, поэтому это будет выглядеть очень странно, если я выдвину его без добавления дополнительных отступов в рамках перехода.
Когда я добавляю отступы, это смещает текст, так как теперь имеется другое количество горизонтального пространства. Я не могу добавить отступы заранее, иначе текст будет смещен. Как это исправить?
Сейчас у меня есть следующий код:

Код: Выделить всё

* {
box-sizing: border-box;
}

.pop-out {
position: relative;
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out, border-radius 0.2s ease-in-out;

&:hover {
cursor: pointer;
background-color: white !important;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
transform: scale(1.1);
border-radius: 10px;
padding-left: 1rem;
padding-right: 1rem;
}
}

#wrapper {
margin-left: 50px;
display: flex;
justify-content: center;
}

#my-element {
background-color: gray;
width: 200px;
flex: 0 0 auto;

}

Код: Выделить всё

My element.

Подробнее здесь: https://stackoverflow.com/questions/790 ... g-text-css