渐变下划线 | CSS-Tricks

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%);
 }

查看CodePen上的作品渐变下划线，作者 Chris Coyier (@chriscoyier) 在 CodePen 上发布。

asd

# 2011年8月18日

yohooo

Nicklas

# 2011年10月18日

不错！

添加一些过渡效果，会更加炫酷！ :)

Sarang

# 2012年4月2日

太棒了！非常感谢！

Brett M

# 2013年8月20日

有没有解决换行的办法？当我的链接足够长而换行时，下一行不会有下划线。

Daniel Bachhuber

评论永久链接# 2017年4月14日

有没有解决换行的办法？

我还没有找到正确换行渐变的解决方案，所以我不得不禁用链接的换行。

a {
white-space: nowrap;
}

Shachar

# 2014年12月6日

Firefox需要 -moz-linear-gradient(left, transparent 0%,#444 50%,transparent 100%);

rahul

# 2015年9月1日

还不错。但它只在Chrome中有效。

Darma

# 2016年7月18日

嗨，很酷的技巧。你可以通过添加特定于供应商的属性使其在其他浏览器中工作

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%);

Mystic

# 2016年10月2日

不错的技巧！！

评论

发表评论 取消回复

发表评论取消回复