CSS Hover Treat Element As Square - css

Question

I have a down arrow created in CSS however I would like for it to be treated like a square. Currently, to trigger any of the hover effects, you need to hover over one of the lines. I would like to hover in between the lines to achieve the same effect but I can't think of anything that works.
Unfortunately I'm horrible when it comes to explaining problems so searching was difficult, so hopefully I can receive help here. I have a snippet below with my CSS.
.down:before {
transform: rotate(55deg) translateX(-20px);
}
.down:after {
transform: rotate(-55deg) translateX(20px);
}
.down:before,
.down:after {
content: '';
background-color: #000;
display: block;
height: 2px;
width: 40px;
transition: all 500ms ease-in-out;
}
.down:hover:before,
.down:hover:after {
background-color: #808080;
}
/* FOR VISIBILITY IN SNIPPET */
.down {
position: absolute;
top: 50px;
left: 50px;
}

Answer 1

Disclaimer: These values may require adjustments depending upon the usage.
This can be done by setting a padding for the element.
padding-top: 50px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
or combined padding: top right bottom left
padding: 50px 10px 10px 10px;
See the demo below:
.down:before {
transform: rotate(55deg) translateX(-20px);
}
.down:after {
transform: rotate(-55deg) translateX(20px);
}
.down:before,
.down:after {
content: '';
background-color: #000;
display: block;
height: 2px;
width: 40px;
transition: all 500ms ease-in-out;
}
.down:hover:before,
.down:hover:after {
background-color: #808080;
}
/* FOR VISIBILITY IN SNIPPET */
.down {
position: absolute;
top: 50px;
left: 50px;
padding-top: 50px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}