リンクの下線のフェードアウトの方法を教えていただきたいです。

Question

実現したいこと

リンクをホバーした時に下線をフェードアウトさせたいです。

（具体的には、補足情報のREADMOREのような下線のフェードアウトを実現したいです。）

該当のソースコード

.pickup a{
  color: black;
  transition: all 1s 0s linear;
}

.pickup a:hover{ 
  text-decoration: none;
}

試したこと

transitionプロパティを利用してフェードアウトを試みたがうまく動作しない。

補足情報（FW/ツールのバージョンなど）

https://code-jump.com/demo/html/blog/

codejumpより引用

Answer 1

単純にフェイドアウトさせるだけなら、下線色を透過色にすればいいでしょう。

.pickup a {
  color: black;
  text-decoration-color: rgba(0,0,0,1);
  transition: all 1s 0s linear;
}
.pickup a:hover{ 
  text-decoration-color: rgba(0,0,0,0);
}

リンク先の READ MORE はフェイドアウトと同時に下に移動もさせているので、そのようにしたければ、
::after疑似要素で下線を作成してそれをアニメーションさせます。

.pickup a {
  color: black;
  text-decoration: none;
  position: relative;
}
.pickup a::after {
  content: "";
  position: absolute;
  height: 1px;
  width: 100%;
  left: 0;
  bottom: 0;
  background: black;
  transition: all 1s 0s linear;
}

.pickup a:hover::after {
  opacity: 0;
  transform: translateY(3px);
}