Head pat the bear
... by hovering over it (👇 go to bear).
If you want it too, paste the following into the theme CSS of your bear blog:
footer a {
position: relative;
&:hover {
&:after {
content: "🫳";
position: absolute;
top: -100%;
right: .2em;
font-size: 2em;
animation: .12s linear infinite alternate pat;
}
}
}
@keyframes pat {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-0.5em);
}
}
Keep in mind this will target all links in the footer. Also, it might look dumb on some devices, depending on the emoji design.
Some CSS bits explained
I've read a few posts in Discover mentioning insecurities with working with CSS, so I hope this helps you <3
What's happening?
I added the 🫳 emoji using the pseudo element called after. It's a way to add something decorative to some content (the bear link in this case).
The animation property is how it handles the back-and-forth motion. The actual motion of going up is handled by @keyframes pat.
Why em and not px?
It scales better. So if you (or a reader) changes the font size of the footer, the patting stays on top of the bear's head.
What's the & character for?
In modern CSS, you can nest your styling. So
a {
&:hover { color: pink }
}
is the same as
a:hover { color: pink }