DEV Community

Discussion on: Cool uses of the ::before and ::after pseudoelements

Collapse
 
elarcis profile image
Elarcis • Edited

One use that ::before and ::after allows for is also to extend the clickable area of interactive elements such as buttons and links: instead of making an element (say, a card) clickable and having it emulates the link behavior, use an actual anchor tag, set its ::after with absolute positionning so that it wraps the whole element.

The benefit is that you keep both your interactivity semantic (as it’s still the link that is clicked) and the browser’s expected behavior (ctrl-click to open in a new tab, etc.).