レイアウトの組み方一覧

パターン1
テキスト要素のbackground-imageを使用する

ユーザー名

user_id

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

ユーザー名

user_id

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

ユーザー名

user_id

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

ユーザー名

user_id