Published
Updated
Easily manage projects with monday.com
a {
position: relative;
padding-bottom: 2px;
text-decoration: none;
}
a:hover::after {
content: "";
position: absolute;
bottom: 2px;
left: 0;
height: 1px;
width: 100%;
background: #444;
background: linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
}
See the Pen Gradient Underlines by Chris Coyier (@chriscoyier) on CodePen.
All comments are held for moderation. We'll publish all comments that are on topic, not rude, and adhere to our Code of Conduct. You'll even get little stars if you do an extra good job.
You may write comments in Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before and after.
Want to tell us something privately, like pointing out a typo or stuff like that? Contact Us.
yohooo
Not bad!
Throw some transition into that and it’ll be even fancy-er! :)
Awesome Man ! Thanx Big Thanx !
Is there a fix for line wrapping? When my link is long enough to wrap onto the next line, the next line won’t be underlined.
I didn’t find a solution to properly wrap the gradient, so I had to disable wrapping for the link:
a {
white-space: nowrap;
}
For Firefox needs -moz-linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
not bad.but it is only work in chrome.
Hi, cool trick. You can make it work on other browser by adding vendor specific properties:
background: -webkit-linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
background: -moz-linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
background: -o-linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
background: linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
Nice trick !!