使用伪元素给超链接设置自定义下划线

最新推荐文章于 2024-05-18 17:58:38 发布

努力向前，成长可见

最新推荐文章于 2024-05-18 17:58:38 发布

阅读量664

点赞数

分类专栏：干货文章标签： css3

本文链接：https://blog.youkuaiyun.com/qq_44555964/article/details/111501387

版权

干货专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何使用CSS3的伪元素为超链接设置自定义下划线，包括设置下划线的粗细、长度以及通过border-radius创建圆角效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

相信你和我一样对如何给超链接设置自定义下划线充满兴趣，如何设置下图这样的下划线呢？
在这里插入图片描述
废话不多说，下面直接上代码

  .nav .router-link-exact-active{
    position: relative;
  }
  .nav .router-link-exact-active:after{
    content: '';
    position: absolute;
    left: 1.25rem;
    bottom: 0;
    width: 2.5rem;
    height: .2rem;
    background-color: #fff;
    border-radius: .1rem;
  }