I need the hover effect (the background of the pseudo-element changing to green) to only show up when the button is being hovered over. Right now, it also triggers when hovering over the pseudo-element itself (green box).
button {
box-sizing: border-box;
background-color: blue;
padding: 10px 20px;
color: white;
position: relative;
}
button::before {
content: '';
position: absolute;
background-color: transparent;
height: 20px;
width: 100%;
left: 0;
bottom: -30px;
}
button:hover::before {
background-color: green;
}<button>
I am a button
</button>