CSSで「*」の注釈マークを作る方法
今回は、お問い合わせフォームでよく見かける「*」の注釈マークをCSSで作る方法を紹介します。
簡単なので、是非真似してコーディングしてみてください！
目次
CSSで「*」の注釈マークを作る方法
完成形はこちら。
See the Pen
Untitled by webis (@webis-co)
on CodePen.
注釈マークは頻繁に使うので、是非この機会にマスターしましょう！
HTML
<table>
<tr>
<th class="annotation"><label>注釈マークあり</label></th>
<td><input type="text"></td>
</tr>
<tr>
<th><label>注釈マークなし</label></th>
<td><input type="text"></td>
</tr>
</table>
お問い合わせフォームで使う機会が多いので、今回はtableタグを使って実装していきます。
CSS
.annotation::after {
color: red;
content: " *";
}
注釈マークは擬似要素を使って作ることができます。
annotationクラスのafterに色を指定し、「content: ” *”;」で注釈マークを表示させたら完成です！
まとめ
以上が、「CSSで「*」の注釈マークを作る方法」でした。
大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。
