Create Direction-Aware Effects Using Modern CSS

Overview

Learn how to create direction-aware effects using modern CSS in this 19-minute tutorial video. Explore techniques for building a directionally-aware hover effect for navigation, similar to YouTube tabs. Discover how to use padding instead of gap, add underlines with pseudo-elements, and create basic animations on hover. Master the art of making lines move to the right and left, clean up code with custom properties, and improve animations for smooth sliding effects. Address browser support issues for those that don't support :has(). While not a perfect solution, gain valuable insights and skills by building this CSS-only directional effect.

Syllabus

- Introduction
- What we are starting with
- Using padding instead of gap
- Adding the underline with a pseudo-element
- Adding a basic animation on hover
- Making the line move to the right
- Making the line move to the left
- Cleaning things up with custom properties
- Improving the animation so that it slides
- Browser support for browsers that don’t support :has
- This isn’t perfect!