リンクテキストと下線の間にスペースが入るように、下線付きのリンクにアニメーションを付けるにはどうすればよいですか？

Question

テキストと下線の間にスペースが入るように、どのようにしてborder-bottomを使用してリンクに下線を付けることができますか？

私は以下の方法でそれを行う方法を知っているので、デフォルトのtext-decoration要素がアニメーション化されています。しかし、私はリンクと下線の間にスペースを入れたいので、私は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); 
} 

Answer 1

あなたが提示したコードは、デフォルトのテキスト装飾ではなく、擬似要素を使用しています。擬似要素は絶対的に配置されているので、距離を簡単に変更できます。 -5pxまたは任意の負の値にa:before底に変更がしたい距離に合う：

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>

Answer 2

することができます偽の背景と背景のサイズを介したアニメーションボーダー：

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>