今回は、お問い合わせフォームでよく見かける「*」の注釈マークを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で「*」の注釈マークを作る方法」でした。