ホバーアニメーションの実装例

パターン2
テキスト要素の疑似要素(::before / ::after)とpositionプロパティを使用する

ユーザー名

user_id

パターン3
テキスト要素にFlexboxを設定 + 子要素(span)に疑似要素を設定する

ユーザー名

user_id

パターン4
テキスト要素にFlexboxを設定 + 子要素(インラインSVG)を追加する

ユーザー名

user_id