こんにちは！プロクラスの杉本です！
最近、コーティングをしていて、<video>タグにbeforeを使って装飾をつけようとした際に、あれ？beforeが効かない！と焦ったことがあり、擬似要素が効かないhtmlタグもあるのだと知りました。
そこで今回は、備忘録も兼ねて擬似要素が効かないhtmlタグを調べてみました！
擬似要素が効かないhtmlタグ
調べてみると、擬似要素が効かないhtmlタグが思っていたより多くありました。
下記が擬似要素が効かないタグになります。
今回は、こちらのサイトを参考にさせていただきました。
個人的にあまり使ったことのないタグが多くあり、使用方法もまとめてみました。
こうして表をみてみると、<img>タグは、疑似要素が効かないのは意外でした。 擬似要素が効かない共通点は、置換要素であることと閉じタグがないvoid 要素であることが挙げられていますが、その２つにも属さないタグも存在しています。
これらすべて覚えるのは大変なので、擬似要素が効かないよく使うhtmlタグを覚えておくとコーディングに役に立ちそうですね！
| <br> | 文章を明示的に改行するためのタグ。 |
| <wbr> | 改行をしてもよい箇所を指定するタグ。 |
| <canvas> | 図形を描くために使用するタグ。JavaScriptを用いて線や画像を表示する。 |
| <embed> | 文書内に音声や動画などのデータを埋め込むためのタグ。 |
| <object> | 画像や動画、音声、プラグインデータ、HTML文書などのさまざまな形式を持つデータを文書に埋め込むためのタグ。 |
| <audio> | 音声ファイルを埋め込むことができるタグ。 |
| <iframe> | 文書の中にインラインのフレームを作成するためのタグ。src属性を使用し、コンテンツを読み込ませることが多い。 |
| <video> | ビデオファイルを文書内に埋め込むためのタグ。 |
| <input> | <form>タグで作成したフォームの中でテキスト入力欄やボタンなどの部品を作成する要素。 |
| <textarea> | 複数行の入力が可能な入力欄を作成するためのタグ。 |
| <select> | <form>で作成したフォームの中でメニュー（セレクトボックス）を作成するためのタグ。 |
| <img> | 文書内に画像を表示するためのタグ。 |
表の参考サイト