# Danny Guo - Animated Multiline Link Underlines With CSS (Highlights) ![rw-book-cover|256](https://readwise-assets.s3.amazonaws.com/static/images/article2.74d541386bbf.png) ## Metadata **Review**:: [readwise.io](https://readwise.io/bookreview/19374978) **Source**:: #from/readwise **Zettel**:: #zettel/fleeting **Status**:: #x **Authors**:: [[Danny Guo]] **Full Title**:: Animated Multiline Link Underlines With CSS **Category**:: #articles #readwise/articles **Category Icon**:: 📰 **URL**:: [www.dannyguo.com](https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/) **Host**:: [[www.dannyguo.com]] **Highlighted**:: [[2022-10-03]] **Created**:: [[2022-10-07]] ## Highlights - I eventually found a CodePen by Shaw that doesn’t have this flaw. I modified the CSS until I got to a solution that looks good to me. ^392004934 This works properly if the link spans more than one line. ```css a { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-position: 0% 100%; background-repeat: no-repeat; background-size: 0% 2px; transition: background-size .3s; } a:hover, a:focus { background-size: 100% 2px; } ```