2022-11-20
3141
#css
David Herbert
86854
Nov 20, 2022 ⋅ 11 min read

CSS ::before and ::after for custom animations and transitions

David Herbert David is a frontend developer by day and a technical writer by night who enjoys breaking down complex topics into comprehensible bits, digestible even by five-year-olds.

Recent posts:

Why Kimi K2 is a frontend game-changer

Agentic AI for 5x less: Why Kimi K2 is a frontend game-changer

Kimi K2 doesn’t just tell you what to write or how to solve a problem; it writes the code, executes the tasks, and gets stuff done.

Chizaram Ken
Aug 22, 2025 ⋅ 8 min read
Gemini CLI vs Codex CLI: A Comparative Analysis

Does Gemini CLI fall short? Here’s how Codex compares

Compare Codex CLI vs Gemini CLI for real-world coding tasks. See strengths, weaknesses, and which AI CLI fits your developer workflow best.

Emmanuel John
Aug 20, 2025 ⋅ 8 min read
Is Next.js Still Developer-Friendly?

Is Next.js still developer-friendly?

The question isn’t whether Next.js is good or bad; it’s whether the productivity gains are worth the complexity tax.

Chizaram Ken
Aug 20, 2025 ⋅ 5 min read
Don’t Let AI Erase The Next Generation Of Dev Leaders

Don’t let AI erase the next generation of dev leaders

As AI tools take over more routine coding work, some companies are cutting early-career dev roles — a short-sighted move that could quietly erode the next generation of tech leaders if we aren’t careful.

Jack Herrington
Aug 19, 2025 ⋅ 6 min read
View all posts

11 Replies to "CSS ::before and ::after for custom animations and transitions"

  1. Thanks for the greate article, but i have small question about button, can you explain it. Why in body must have display: grid?. When i remove display: grid from body, the pseudo element display on the left of button, but when use display: grid, the pseudo element will disappear. and Sorry my english grammer is not good. Have a nice day

  2. Thanks for this great work.
    In the example with “hover me”, the bt css property shouldn’t be defined on “inline” otherwise the property “overflow” doesn’t work.
    “display:inline-block” inside bt section works.

Leave a Reply