CSSで「*」の注釈マークを作る方法

今回は、お問い合わせフォームでよく見かける「*」の注釈マークをCSSで作る方法を紹介します。

簡単なので、是非真似してコーディングしてみてください!

CSSで「*」の注釈マークを作る方法

完成形はこちら。

See the Pen
Untitled
by webis (@webis-co)
on CodePen.

注釈マークは頻繁に使うので、是非この機会にマスターしましょう!

HTML

 

お問い合わせフォームで使う機会が多いので、今回はtableタグを使って実装していきます。

CSS

 

注釈マークは擬似要素を使って作ることができます。

annotationクラスのafterに色を指定し、「content: ” *”;」で注釈マークを表示させたら完成です!

まとめ

以上が、CSSで「*」の注釈マークを作る方法」でした。

 

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事