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が居なくなる。未来は明るいぞ!