DEV Community

Cover image for 100 more underline/overlay animations | The upgraded CSS collection πŸ₯‡πŸ₯ˆπŸ₯‰
Temani Afif
Temani Afif

Posted on β€’ Edited on

100 more underline/overlay animations | The upgraded CSS collection πŸ₯‡πŸ₯ˆπŸ₯‰

Ready for the 3rd round? let's go!

As usual: No SVG, No JS, No extra tag, No pseudo element, No keyframes. Only one element and transitions.


Table of content


The Curved

The Irregular

The Unexpected III

The Zig Zag

The Double III

The Arrow

The Circular

The All Sides II

The Fancy III

The Inverted III

The below doesn't work on Firefox due to a known bug

The Buggy

I don't know what happened with the below ones. There is no underline/overlay, they are simply buggy ...

The Morphing II

The Broken

The Arcade


That's it

You are probably wondering until where I can go with such collections? All depend on your reactions β€οΈπŸ¦„!

Top comments (32)

Collapse
Β 
grahamthedev profile image
GrahamTheDev β€’

Love it once again, spent a good 5 minutes getting my head around how Mario was drawn! (I know, spoilers!)

I am getting pretty tired of praising you now though so all you get is a "good job" this time 🀣🀣 πŸ˜‹

Collapse
Β 
icecoffee profile image
Atulit Anand β€’

Ditto haha πŸ˜‚

Collapse
Β 
madza profile image
Madza β€’

Insane list πŸ’― Especially arcade ones and the Batman one πŸ™Œ

Collapse
Β 
afif profile image
Temani Afif β€’

come on! no spoil 😜

Collapse
Β 
oscarrios0101 profile image
Oscar Rios β€’

you are a god

Collapse
Β 
afif profile image
Temani Afif β€’

another list is released: dev.to/afif/still-100-underline-ov...

Collapse
Β 
lkotan profile image
Lutfi Kotan β€’

Very good...

Collapse
Β 
chooco profile image
Liv β€’

Love the design!

Collapse
Β 
schleidens profile image
Schleidens.dev β€’

Seriously you can make a css library with those code .

I hope you will find this interesting

Collapse
Β 
marex980 profile image
marex980 β€’

Awesome! Batman wins! :)

Collapse
Β 
afif profile image
Temani Afif β€’

in case you missed it, the previous collection also contain a Batman ;)

Collapse
Β 
bravemaster619 profile image
bravemaster619 β€’

Fun fact: you can solve the puzzle in his stackoverflow profile to get reach to him

Collapse
Β 
hilmi profile image
Hilmi β€’

awesome

Collapse
Β 
mo7ammedabdulhakeem profile image
mohammed abdulhakeem alqadasi β€’

Great, is it ok to show us the source code?

Collapse
Β 
afif profile image
Temani Afif β€’

I am not hiding anything, the source is there. Maybe you are not familiar with codepen?

Collapse
Β 
mo7ammedabdulhakeem profile image
mohammed abdulhakeem alqadasi β€’

yeah sorry I just found it, thanks a million β™₯