フォームの必須文言をCSSだけで制御する

HubSpotのフォームのかゆいところは幾つかありますが、そのうちの1つに “必須の記号「*」の変更オプションがない” というものがあります。下記キャプチャの部分ですね。

「これを『必須』にしたい」という要望をよくいただきますので、CSSだけで完結する方法をご紹介します。といっても仕組みさえ思い付けば割とシンプルで、次のようなコードになります。

.hs-form-required {
  font-size: 0;
}

.hs-form-required::after {
  content: '必須';
  font-size: .8rem;
}

表示は次の通りです。

ポイントはfont-size: 0;で、これがないと「*」は消えません。とはいえdisplay, visibility, opacityなどで消そうとしても子要素となる::afterも消えてしまうので、font-sizeで制御します。少しかゆいのは “必須” のfont-sizeにemを使えないことですが、仕方ないですね。