【備忘録】Reactでemotionを使って親要素の疑似クラス（hover）をきっかけに子要素を変化させる

方法

想定はLinkコンポーネントが生成するリンクタグをマウスオーバーすると文字列の疑似要素として設定した下線部分が出現する動作。
自分のポートフォリオのヘッダーを作る際に使ったものです。
Reactとかemotionとか以前にcssの理解度が低すぎてハマった感が否めませんが誰かのお役に立てれば...
今見れば簡単な話なのにこれに半日かけたと思うと基礎って大事だな実感しました。

<Link to="/" css={link}>
    <span>Home</span>
</Link>

const link = css` 
　　　　　  //※
`

//※の中に記述する内容
  display: flex;
  text-decoration: none;
  padding: 1.5em 2em;

  span {
    position: relative;
      ::after {
        position: absolute;
        opacity: 0;
        z-index: 5;
        content: "";
        width: 100%;
        bottom: -10px;
        height: 5px;
        left: 0;
        display: block;
        background: red;
        transition: all 0.5s;
      }
    }
  :hover span::after {
      opacity: 1;
  }