I am attempting to create a circular border around an emoji, contained within a span inside a div.
The 50% radius border should appear on hover, which it does, but the content in the span gets pushed below the div. Refer to the screenshot provided.
<div className={styles.emojiContainer} key={index}>
<span className={styles.emoji} role="img" aria-label={feeling} onClick={handleClick}>😄</span>
<p>happy</p>
</div>
CSS:
.emojiContainer {
display: flex;
flex-direction: column;
align-items: center;
p {
margin-top: 1rem;
}
}
.emoji {
display: inline-block;
border-radius: 50%;
font-size: 3.5rem;
height: 3.5rem;
width: 3.5rem;
}
.emoji:hover {
border: 4px solid #2773e2;
}