CSSのbefore擬似要素とafter擬似要素が使えるHTMLの意外な要素

CSSでスタイリングする際、様々な箇所で便利に使えるbefore擬似要素とafter擬似要素ですが、開始タグ (<TAG>) と終了タグ (</TAG>) を持たない空要素 (<TAG />) には使えないと思っていませんか？

今回は、before擬似要素とafter擬似要素が使える意外な要素を紹介します。

hr要素

hr要素 (<hr />) にbefore擬似要素とafter擬似要素 (以下擬似要素) が使えるのは、割と知られているかもしれませんね。

WordPressのブロックエディタにある「区切りブロック (wp-block-separator)」のスタイリングにも一部擬似要素が使用されています。

空要素だから使えないというわけではない、ということですね。

しかし、改行を意味するbr要素 (<br />) には擬似要素は使えません。改行を意味する要素に「改行以外の装飾は施すな！」ということでしょうか。

img要素

img要素も空要素ですが擬似要素が使用できます。ただし、画像が表示されなかった場合に限ります。

しかも、ChromeとFirefoxでは表示される条件が異なり、Firefoxはalt属性値が設定してある場合に限られます。

さらに、alt属性値をbefore擬似要素で表示させる仕様になっているようなので、任意のbefore擬似要素を表示させることはできません。

なので、実用的ではありません。

input要素

フォーム部品 (入力項目) を表示するためのinput要素 (<input … />) も空要素ですが、表示させるtype属性値 ([type="X"]) によっては擬似要素が使えます。

擬似要素が使えないtype属性値

擬似要素が使えないtype属性値は、キーボードで文字入力するフィールドと各種ボタンが表示されるものです。

フィールド状のフォーム部品

[type="text"]

[type="tel"]

[type="url"]

[type="email"]

[type="password"]

[type="date"]

[type="month"]

[type="week"]

[type="time"]

[type="datetime-local"]

[type="number"] (OSやブラウザによる)

ボタン状のフォーム部品

[type="submit"]

[type="reset"]

[type="button"]

ただし、フィールド状のフォーム部品はlabel要素と組み合わせる、ボタン状のフォーム部品はbutton要素に置き換える、といった工夫をすれば、擬似要素が使えるようになります。

…
<style>
[class*="__label__"] {}
.__label__text {}
.__label__text::before {}
.__label__text::after {}
.__label__text > input {}
.__label__text:hover {}
.__label__text:focus-within {}
[class*="__button__"] {}
.__button__submit {}
.__button__submit::before {}
.__button__submit::after {}
.__button__submit:hover {}
.__button__submit:focus {}
</style>
…
<label class="__label__text"><input type="text" … /></label>
…
<button type="submit" class="__button__submit"> … </button>
…

ちなみにtextarea要素もフィールド状のフォーム部品と同様です。

ブラウザによっては使えるtype属性値

ブラウザによっては擬似要素が使えるというtype属性値も存在します。

スピナー状のフォーム部品

[type=”number”] (OSやブラウザによる)

スライダー状のフォーム部品

[type=”range”]

専用のダイアログを開くボタン状のフォーム部品

[type=”color”]

[type=”file”] (ラベル付き)

Chromeは擬似要素が表示されるのに対し、Firefoxは全く表示されません。

つまり、実用的ではありません。

チェックボックスとラジオボタン

チェックボックス ([type="checkbox"]) とラジオボタン ([type="radio"]) は、appearanceプロパティ値をnoneにすることで、OSやブラウザ既定のスタイルが適用されなくなり、擬似要素が使えるようになります。

[type="checkbox"],
[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
}
[type="checkbox"] {}
[type="checkbox"]::before {}
[type="checkbox"]::after {}
[type="radio"] {}
[type="radio"]::before {}
[type="radio"]::after {}

擬似要素をうまく使用すれば、オリジナルのデザインも簡単にできそうですね。

イメージボタン

イメージボタン ([type="image"]) はimg要素と同様に、画像が表示されなかった場合に限り擬似要素が表示されます。

Firefoxの場合、img要素とは異なり、alt属性の有無に関わらず擬似要素が表示されますが、alt属性値の表示にbefore擬似要素が使用されるのは同じです。

擬似要素で装飾したい場合は、button要素とimg要素を組み合わせた方が良いと思います。

…
<style>
.__button__image {}
.__button__image::before {}
.__button__image::after {}
.__button__image > img {}
.__button__image:hover {}
.__button__image:focus {}
</style>
…
<button class="__button__image"><img … /></button>
…

select要素・optgroup要素・option要素

select要素はsize属性値が「2」以上の場合か、multiple属性が付与されている場合に、擬似要素が表示されます。

Chromeの場合、select要素、optgroup要素、option要素の擬似要素すべてが表示されます。

Firefoxの場合、optgroup要素、option要素の擬似要素は表示されますが、select要素の擬似要素は表示されません。また、optgroup要素のlabel属性値をbefore擬似要素で表示させる仕様になっているようで、設定したcontentプロパティでlabel属性値を上書きしてしまうため、before擬似要素は使用できない (使用すべきではない) という状態です。

これも、実用的ではありません。

おまけ: html要素

HTMLのルート要素であるhtml要素にも擬似要素が使用できます。ローディングアニメーションの表示用に使用したり、background-attachment: fixed; ができないSafari向けに position: fixed; で代用するのに使用したりと、割と良い感じに使用できます。

〆

今年やっとIEが居なくなる。未来は明るいぞ！