How to vertically center pseudo element on transform rotate in Firefox - css

Question

I'm having trouble on how to achieve making the X stay at the middle during transform. It looks like the issue only occur in Firefox browser between Chrome and FF.
I'm using FF Quantum 58.0.2 and the X moves to the top, in Chrome I have no issues.
I tried to add top: 50%; in the pseudo element selector but during rotation the X moves few pixels to the bottom. Is there any other way to achieve this in Firefox like it does in Chrome?
.close >.x-button{
width: 0.5em;
height: 0.5em;
position: relative;
background-color: #343a40;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0.5em 0em;
transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
transform-origin: center center;
}
.close >.x-button::before,
.close >.x-button::after{
position: absolute;
content: '';
width: 100%;
height: 0.08em;
}
.close:hover >.x-button{
border-radius: 0;
background-color: transparent;
-ms-transform: scale(1.8) rotateZ(-360deg);
-o-transform: scale(1.8) rotateZ(-360deg);
-webkit-transform: scale(1.8) rotateZ(-360deg);
-moz-transform: scale(1.8) rotateZ(-360deg);
transform: scale(1.8) rotateZ(-360deg);
}
.close:hover >.x-button::before,
.close:hover >.x-button::after {
background-color: #FD0030;
}
.close >.x-button::before{
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.close >.x-button::after{
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
<button class="close">
<span class="x-button"></span>
</button>

Answer 1

You could also add bottom: 0.20em on
.close >.x-button::before,
.close >.x-button::after
to fix it on all browsers.
Why .20em? .25em is half the icon's dimension and .5em is half the top and bottom margin.
Firefox:
Snippet:
.close>.x-button {
width: 0.5em;
height: 0.5em;
position: relative;
background-color: #343a40;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0.5em 0em;
transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
transform-origin: center center;
}
.close>.x-button::before,
.close>.x-button::after {
position: absolute;
content: '';
width: 100%;
height: 0.08em;
/* new */
bottom: .20em;
}
.close:hover>.x-button {
border-radius: 0;
background-color: transparent;
-ms-transform: scale(1.8) rotateZ(-360deg);
-o-transform: scale(1.8) rotateZ(-360deg);
-webkit-transform: scale(1.8) rotateZ(-360deg);
-moz-transform: scale(1.8) rotateZ(-360deg);
transform: scale(1.8) rotateZ(-360deg);
}
.close:hover>.x-button::before,
.close:hover>.x-button::after {
background-color: #FD0030;
}
.close>.x-button::before {
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.close>.x-button::after {
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
<button class="close">
<span class="x-button"></span>
</button>

Answer 2

You can vertically center the before and after like you do with any position absolute elements
Give it a top: 50% and transform: translateY(-50%)
I verified this on Mac FF
.close >.x-button{
width: 0.5em;
height: 0.5em;
position: relative;
background-color: #343a40;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0.5em 0em;
transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
transform-origin: center center;
}
.close >.x-button::before,
.close >.x-button::after{
position: absolute;
content: '';
width: 100%;
height: 0.08em;
top: 50%;
}
.close:hover >.x-button{
border-radius: 0;
background-color: transparent;
-ms-transform: scale(1.8) rotateZ(-360deg);
-o-transform: scale(1.8) rotateZ(-360deg);
-webkit-transform: scale(1.8) rotateZ(-360deg);
-moz-transform: scale(1.8) rotateZ(-360deg);
transform: scale(1.8) rotateZ(-360deg);
}
.close:hover >.x-button::before,
.close:hover >.x-button::after {
background-color: #FD0030;
}
.close >.x-button::before{
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg) translateY(-50%);
}
.close >.x-button::after{
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg) translateY(-50%);
}
<button class="close">
<span class="x-button"></span>
</button>