Make a custom shape in CSS for menu icon - css

Question

I have an svg icon for a website that I would like to make into a css shape so that I can make a custom effect on hover.
I am using pure CSS for this and am not sure I am approaching the problem correctly.
.wrapper {
position: relative;
height: 100vh;
}
.square {
height: 40px;
width: 40px;
background-color: black;
transition: all .2s;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.square:before {
content: "";
width: 100%;
height: 2px;
background-color: #fff;
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.square:after {
content: "";
width: 100%;
height: 2px;
background-color: #fff;
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
transform-origin: 50%;
transform: translate(-50%, -50%) rotate(90deg);
}
.square:hover {
transform: scale(1.2) translate(-50%, -50%);
}
.square:hover .square:before {
transform: scale(1.2);
}
.square:hover .square:before, .square:hover .square:after {
height: 4px;
}
<div class="wrapper">
<div class="square"></div>
</div>
https://codepen.io/Portismouth/pen/ZEEXeVP
so far I am using a simple square with a cross created using the :before and :after psuedo-selectors. On hover, Im trying to make the square bigger and the lines thicker to give the impression i'm going for.
It's basically a 2 x 2 grid of squares that I want to expand out from the middle of the square on hover. Should I create a square with four separate squares or continue with my approach so far.
Thanks in advance.

Answer 1

Your code works correctly. If you want to hover and it'll expand from middle of square, don't use translate(-50%, -50%); when hover on square
.wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.square {
height: 40px;
width: 40px;
background-color: black;
transition: all .2s;
}
.square:before {
content: "";
width: 100%;
height: 2px;
background-color: #fff;
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.square:after {
content: "";
width: 100%;
height: 2px;
background-color: #fff;
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
transform-origin: 50%;
transform: translate(-50%, -50%) rotate(90deg);
}
.square:hover {
transform: scale(2);
}
<div class="wrapper">
<div class="square"></div>
</div>