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:

The right way to implement AI into your frontend development workflow

Discover how to integrate frontend AI tools for faster, more efficient development without sacrificing quality.

Wisdom Ekpotu
Apr 23, 2025 ⋅ 5 min read
React Hook Form Vs. React 19: Should You Still Use RHF In 2025?

React Hook Form vs. React 19: Should you still use RHF in 2025?

Is React Hook Form still worth using? In this guide, you will learn the differences, advantages, and best use cases of React Hook Form.

Vijit Ail
Apr 23, 2025 ⋅ 20 min read
deploying react apps to github pages

How to deploy React apps to GitHub Pages

Walk through the process of deploying a Create React App project to GitHub Pages, customizing your domain, and automating deployments with GitHub Actions.

Nelson Michael
Apr 22, 2025 ⋅ 10 min read
move before api

We can finally move elements in the browser with the moveBefore() API

The newly announced moveBefore() API helps developers easily reposition DOM elements while preserving their state.

Chizaram Ken
Apr 22, 2025 ⋅ 8 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