「リンクのアンダーラインをhoverした時、ラインを消してから引きなおしたい。」
いつもそうやって検索するのですが、目当てのアンダーラインが出てきません。

よく使うけど、検索でなかなか見つからない。
何回も数をこなしているのに、忘れてしまう。

要件は以下です。
・リンクのアンダーラインをhoverで消してから引きなおしたい

サンプル
https://astrowave.jp/amnesia_record/underline.php

google検索だと時間が取られちゃってイライラしていませんか？AI（chatgptを試してみた）に聞くと一発です。検索はAIの時代なのかなと感じます。

keyframesという単語の入力もままならない時があるのです( ﾟρﾟ )。
それで検索に引っかからない恐れもあります。

このブログも、何回も見てもらえるようなサイトにしたいですね。

【共有】アンダーラインのアニメーション

ほぼ自分用に記録するものです。

html

<div class="underline">応募規約はこちら</div>

<div>になっていますが<a>タグにするなどしてください。

css

.underline {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.05em;
  line-height: 23px;
  color: #7b7c69;
  display: inline-block;
  cursor: pointer;
  position: relative;
  margin: 15px 0 0;
}
.underline::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  left: 0;
  bottom: 0;
  background: #7B7C69;
}
.underline:hover::before {
  animation: hideAndShowUnderline 0.6s forwards;
}

@keyframes hideAndShowUnderline {
  0% {
    width: 100%;
  }
  5% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

cssコード25行目の
@keyframe shideAndShowUnderlineを見ると仕組みが簡単に想像つくと思います。
疑似要素ライン線のwidthのサイズ%を変えています。

記事の内容が短く、つまらないかもしれないと思いました。
サイガモが最近お気に入りのyoutubeの作業用ミュージックを共有します。

星間旅路のメロディ

「宇宙の静けさに包まれながら、漂流する過去の音楽を捜し求め、銀河の奥底でその旋律に耳を傾ける。」

「この電波はどこの星からきたのだろうか。」