Create Direction-Aware Effects Using Modern CSS

Create Direction-Aware Effects Using Modern CSS

Kevin Powell via YouTube Direct link

- Browser support for browsers that don’t support :has

10 of 11

10 of 11

- Browser support for browsers that don’t support :has

Class Central Classrooms beta

YouTube videos curated by Class Central.

Classroom Contents

Create Direction-Aware Effects Using Modern CSS

Automatically move to the next video in the Classroom when playback concludes

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

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.