CSSで記述した疑似要素を:hoverした時に消したい

前提・実現したいこと

プログラミング初学者です。
現在、サイトのコーディングを行っているのですが、CSSで記述した疑似要素(記述した疑似要素は下記コードのread moreという箇所に下線を作りました)を:hoverした時に消すアニメーションを行いと考えています。
よろしければ、アドバイスを頂きたいです。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

-HTML-
<div id="pick" class="wrapper">
      <article class="article">
        <img src="img/pickup1.jpg" alt="" />
        <h3>息抜きで一回は行ってみたい場所</h3>
        <div><a href="#" class="read__more">read more</a></div>
      </article>

      <article class="article">
        <img src="img/pickup2.jpg" alt="" />
        <h3>10年後パートナーと行きたい場所</h3>
        <div><a href="#" class="read__more">read more</a></div>
      </article>

      <article class="article">
        <img src="img/pickup3.jpg" alt="" />
        <h3>もうわからん</h3>
        <div><a href="#" class="read__more">read more</a></div>
      </article>
    </div>
-/HTML-

-CSS-
#pick {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}
#pick img {
  width: 90%;
  margin-top: 35px;
}
.read__more {
  font-size: 14px;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 1px;
}
.read__more::after {
  position: absolute;
  content: '';
  display: inline-block;
  background-color: #000;
  top: 100%;
  right: 0;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;

  transition: all 1s ease;
}
.resd__more:hover::after {
  opacity: 0;
  transform: translateY(3px);
}
-/CSS-