如何使用边框底部动画链接下划线，以便链接文本和下划线之间有空格？

问题描述：

如何使用边框底部使链接下划线动画，以便文本和下划线之间有空格？如何使用边框底部动画链接下划线，以便链接文本和下划线之间有空格？

我知道如何做到这一点，以便默认的文字修饰元素是动画。但我想在链接和下划线之间留出空间，这就是为什么我认为我需要使用border-bottom。但我无法通过过渡动画获取边框底部的作品。我怎么能这样做？我试图寻找其他解决方案，但找不到任何解决方案。谢谢！

h2 > a { 
    position: relative; 
    color: #000; 
    text-decoration: none; 
} 

h2 > a:before { 
    content: ""; 
    position: absolute; 
    width: 100%; 
    height: 2px; 
    bottom: 0; 
    left: 0; 
    background-color: #000; 
    visibility: hidden; 
    -webkit-transform: scaleX(0); 
    transform: scaleX(0); 
    -webkit-transition: all 0.3s ease-in-out 0s; 
    transition: all 0.3s ease-in-out 0s; 
} 

h2 > a:hover:before { 
    visibility: visible; 
    -webkit-transform: scaleX(1); 
    transform: scaleX(1); 
}

答

您呈现的代码使用伪元素而不是默认文本修饰。由于伪元素被绝对定位，所以您可以轻松地改变距离。更改a:before底部-5px或任何负值适合您需要的距离：

a { 
 
    position: relative; 
 
    color: #000; 
 
    text-decoration: none; 
 
} 
 

 
a:before { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 2px; 
 
    bottom: -5px; 
 
    left: 0; 
 
    background-color: #000; 
 
    visibility: hidden; 
 
    -webkit-transform: scaleX(0); 
 
    transform: scaleX(0); 
 
    -webkit-transition: all 0.3s ease-in-out 0s; 
 
    transition: all 0.3s ease-in-out 0s; 
 
} 
 

 
a:hover:before { 
 
    visibility: visible; 
 
    -webkit-transform: scaleX(1); 
 
    transform: scaleX(1); 
 
}

<a href="#">Long long text</a>

答

你可以伪造通过后台和背景大小的动画边框：

a { 
 
    padding-bottom: 5px; 
 
    /* set here size + gap size from text */ 
 
    background: linear-gradient(0deg, currentcolor, currentcolor) bottom center no-repeat; 
 
    background-size: 0px 3px; 
 
    transition: 0.5s; 
 
    text-decoration: none; 
 
} 
 

 
a:hover { 
 
    background-size: 100% 3px; 
 
} 
 

 
a[class] { 
 
    color: gray; 
 
} 
 

 
a.tst { 
 
    color: purple; 
 
    background: linear-gradient(0deg, currentcolor, currentcolor) bottom center no-repeat, linear-gradient(0deg, turquoise, turquoise) center calc(100% - 2px) no-repeat; 
 
    background-size: 0px 2px; 
 
} 
 

 
a.tst:hover { 
 
    background-size: 100% 2px; 
 
}

<a href>kake animated border</a> 
 
<a href class> why currentcolor ?</a> 
 
<a href class="tst">mix of colors ?</a>

如何使用边框底部动画链接下划线，以便链接文本和下划线之间有空格？

相关推荐