Для того чтобы псевдоэлемент :before оставался на месте при наведении курсора, можно использовать псевдокласс :hover на родительский элемент, а не на сам псевдоэлемент. Например, такой код CSS:
```css
.parent:hover:before {
background-color: red;
}
```
Чтобы реализовать блоки с градиентным бордюром, которые будут увеличиваться при наведении, необходимо использовать свойства transform и transition. Например, такой код CSS:
```css
.block {
border: 2px solid transparent;
border-image: linear-gradient(to right, red, blue);
border-image-slice: 1;
transition: border-width 0.3s;
}
.block:hover {
border-width: 5px;
}
```
Этот код заставит границу блока увеличиваться при наведении, при этом задний план не будет вылазить на передний благодаря свойству border-image-slice.