Using :active and ::before to expand the action area of an item

Photo by Wes Hicks on Unsplash

Context:

Default behavior
Nope!

:active to the rescue!

Oops…
Polka time!

--

--

--

Senior Frontend Developer and Frontend Team Leader at Bliss Applications | I like to scuba dive, play bass and music in general

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Experience with Native Script

The case of the eternal blur

Using .filter() in JavaScript for Beginners

JavaScript — 8 Array Methods You Must Know

Lab Notes: Looking at NestJS for Web Apps — Overview, Performance, Thoughts

Types of React Hooks & Best Practices

Transitioning to Relay Modern at ONEHOPE Wine

Tic Tac Toe: React, TypeScript, XState, fp-ts & CSS Grid

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Gonçalo CA

Gonçalo CA

Senior Frontend Developer and Frontend Team Leader at Bliss Applications | I like to scuba dive, play bass and music in general

More from Medium

Vite.js

SASS Learning Series Part 1: Introduction to SASS

Types of CSS Preprocessors

CSS Grid: dynamic number of columns with a min width

Block, Inline & Inline-block. What’s the difference?

Block elements