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

相信你和我一样对如何给超链接设置自定义下划线充满兴趣，如何设置下图这样的下划线呢？

废话不多说，下面直接上代码

  .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;}

下面对代码做出解释：
通过给点击的超链接添加一个伪元素来实现。首先给该超链接开启相对定位，然后伪元素开启绝对定位，设置伪元素的宽高即该下滑线的粗细和长短，最后伪元素相对父元素（即超链接）向右移动指定的距离，相上移动0px。另外，还可以通过设置border-radius属性让下划线的两端变为圆角。

好啦，你学会了么~

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

android自定义tab下划线变大,android设置tablayout下划线长度代码
设置tablayout下划线长度的方法(android.support.design.widget.TabLayout) public static void setIndicator(Context ...
Amazing Css：自定义下划线样式的Input
Amazing Css:自定义下划线样式的Input 这篇文章将通过CSS的方式实现一个常见的Input样式,包括一些VUE的Tips 效果相比于传统的方框Input同款样式,下划线的input输入 ...
php css下划线,如何自定义下划线的样式
下划线可以通过设置border-bottom以及background-image的值来自定义下划线的样式下划线一般在文本中是一条黑色的直线,那么如何改变下划线的样式呢?接下来在文章中将为大家详细介绍 ...
css中字体下划线样式,css下划线浅谈css自定义下划线
使用css样式对一段文字或一段文字中其中几个文字设置虚线效果的下划线如何实现?我们知道css字体下划线使用text-decoration样式实现,而虚线下划线则不能使用此css样式属性.要实现通过下边 ...
浅谈CSS自定义下划线
问题描述: 使用:first-letter将首字母的font-size增大后,下划线text-underline也会变粗. eg: <!doctype html> <html> ...
android AppCompatEditText 自定义下划线颜色
今天,就讲讲 AppCompatEditText设置下划线颜色的知识. 如下图所示: style中添加 </pre><pre name="code" cla ...
css3禅密花园叫什么名字_CSS秘密花园：自定义下划线
<CSS Secrets>是@Lea Verou最新著作,这本书讲解了有关于CSS中一些小秘密.是一本CSSer值得一读的一本书,经过一段时间的阅读,我.@南北和@彦子一起将在W3cplu ...
php文字下划线,css如何设置字体下划线
css设置字体下划线的方法:可以利用text-decoration属性来进行设置,如[text-decoration: underline;].text-decoration属性用于规定添加到文本的修 ...
php语言字体下划线,css中怎么设置字体下划线
css中设置字体下划线的方法:1.使用"text-decoration:underline;"设置下划线样式:2.通过"border-bottom"属性设置下划 ...

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

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

最新文章

热门文章