Code changing to nonsense

Hi! When I use combined transform properties via the code editor on a selector, not only do they not work as expected, but when I switch selectors then come back to it, the properties that aren’t working, separate and turn into jibber-jabber.
Eg.
transform: translate3d(-525%, 0, 0) rotate(35deg);
becomes
translate3d: -525%, 0, 0;
rotatez-function: 35deg;
Is this because I am using the same selector for :after and :hover? Must we create seperate selectors for each? Basic :hover properties usually work fine.

Here is the code i’m trying to enter

button {
z-index: 1;
position: relative;
font-size: inherit;
font-family: inherit;
color: white;
padding: 0.5em 1em;
outline: none;
border: none;
background-color: hsl(236, 32%, 26%);
overflow: hidden;
cursor: pointer;
}

button::after {
content: ”;
z-index: -1;
background-color: hsla(0, 0%, 100%, 0.2);
position: absolute;
top: -50%;
bottom: -50%;
width: 1.25em;
transform: translate3d(-525%, 0, 0) rotate(35deg);
}

button:hover::after {
transition: transform 0.45s ease-in-out;
transform: translate3d(200%, 0, 0) rotate(35deg);
}

I’m using chrome and the latest version of MT

Edit – Even if I do write the transform properties separately, they still change to ” translate3d: -525%, 0, 0;
rotatez-function: 35deg;”
There is also a bug when this happens, that creates another scrollbar

Another edit – So it does indeed seem I have to create a new selector for every pseudo class in this instance – That will have it’s advantages tbf, and I can see why it would have to be the case, taking the MT controls into consideration.

I never use the gui. I think of MT as a handy way of tapping into and organising additional CSS. It would be pretty cool if a future update had the option to detatch the controls, and let you just write straight up CSS in nicely organised chunks. This might also solve an issue I had before, where only one google font can be used at a time.