I've created a hexagon using CSS after and before properties, and now I'm attempting to add a glowing effect around the hexagon when hovering. It works perfectly for the center of the hexagon but not for the top and bottom points of the shape.
.hexagon1 {
position: absolute;
left: 50%;
transform: translate(-50%);
width: 106px;
height: 61.20px;
background-color: #02cd68;
margin: 30.60px 0;
top:44px;
cursor: pointer;
transition: box-shadow 0.2s ease-in-out;
}
.hexagon1:hover {
box-shadow: 0px 0px 40px #02cd68;
}
.hexagon1:before,
.hexagon1:after {
content: "";
position: absolute;
width: 0;
border-left: 53px solid transparent;
border-right: 53px solid transparent;
}
.hexagon1:before {
bottom: 100%;
border-bottom: 30.60px solid #02cd68;
transition: box-shadow 0.2s ease-in-out;
}
.hexagon1:after {
top: 100%;
width: 0;
border-top: 30.60px solid #02cd68;
transition: box-shadow 0.2s ease-in-out;
}<div class="hexagon1"></div>I've experimented with .hexagon1:after:hover but haven't seen any results:( Any suggestions? Thank you!