# Danny Guo - Animated Multiline Link Underlines With CSS (Highlights)

## 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;
}
```