アニメーション化されたテキストの下線を作成する: ステップバイステップのガイド

Question

このページの最初の例と同様に、ホバー時に <a> ラベル要素を下線でアニメーション化しようとしています。チュートリアルはあるのに、私がやっていることがうまくいかず、その理由がわからないので、この質問をするのはほとんど愚かに思えます。

これは私の CSS コンテンツです

リーリー リーリー ああああ

Answer 1

いくつかのプロパティが欠落していることに気づきました:

1. コンテンツ: a::after の '' が欠落しています。疑似要素の場合、content 属性は空の "" であってもかまいませんが、必ず指定する必要があります。
疑似要素
2. a::after は position:relative を使用するため、position:relative は a にある必要があります。
3. a::after は background-color:inherit を使用していますが、継承できる値がないようです。現在は hotpink という値を与えていますが、これは任意の色にカスタマイズできます。
4. a に cursor:pointer を追加したので、希望の結果とより一致します。

＃＃＃お役に立てれば！

例: (以下のボタンのあるライブデモを参照してください)

リーリー リーリー