Animating Text Underlines

This content originally appeared on Bram.us and was authored by Bramus!

Instead of resorting to faux underlines using injected content, Michelle Barker shares that we nowadays can animate the text-decoration-* properties to achieve similar (and better) results.

This approach however won’t work in Chromium, as only Firefox/Safari support animating text-underline-offset at the moment … but thankfully a tiny amount of CSS Houdini Magic can be sprinkled on top to make Chromium happy ?

See the Pen
Underlines (Chrome solution with Houdini) by Michelle Barker (@michellebarker)
on CodePen.

Animating Text Underlines →

This content originally appeared on Bram.us and was authored by Bramus!

Print Share Comment Cite Upload Translate Updates

APA

Bramus! | Sciencx (2021-04-14T21:45:14+00:00) Animating Text Underlines. Retrieved from https://www.scien.cx/2021/04/14/animating-text-underlines/

MLA

" » Animating Text Underlines." Bramus! | Sciencx - Wednesday April 14, 2021, https://www.scien.cx/2021/04/14/animating-text-underlines/

HARVARD

Bramus! | Sciencx Wednesday April 14, 2021 » Animating Text Underlines., viewed ,<https://www.scien.cx/2021/04/14/animating-text-underlines/>

VANCOUVER

Bramus! | Sciencx - » Animating Text Underlines. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/14/animating-text-underlines/

CHICAGO

" » Animating Text Underlines." Bramus! | Sciencx - Accessed . https://www.scien.cx/2021/04/14/animating-text-underlines/

IEEE

" » Animating Text Underlines." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2021/04/14/animating-text-underlines/. [Accessed: ]

rf:citation

» Animating Text Underlines | Bramus! | Sciencx | https://www.scien.cx/2021/04/14/animating-text-underlines/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.