入力必須の「*」マークをCSSで適用する - なかなかどうして、この有様よ。

入力必須のマークを直接HTMLに記載するのではなく、CSSのclassとして各項目への設定を楽にする。

CSSを利用せずにHTMLに直接Styleを設定すると、以下のようなタグを毎回記載する必要があり、デザインの修正などに手間がかかる。

<th>
   注文日nbsp;<font color="red">*</font>
</th>

そのため、CSSに以下のようなclassを用意し、:afterという疑似要素に必須マークで設定する内容を記載すると、classが設定された要素の後ろに記載された内容を自動的に付与してくれる。

.required:after { 
   content: " *";
   color: red;
}

htmlでは、class名を記載するだけで表示される。

<th class="required">
   注文日
</th>
<th>
   <p class="required">
       品番
   </p>
</th>