擬似要素が付けれない！？htmlタグについて

擬似要素が適用できない

sample.html

<div class="sample">
  <img src="" class="sample-img">
</div>

sample.scss

.sample-css{
  &:before{
    content: "";
    width: 20px;
    height: 20px;
    background-clor: red;
 }
}

本来ならば、上記の様なコードで擬似要素が適用できます。

しかし、ディベロッパーツールで見ても存在しない

コードの記載に間違いがない場合にまず確認して欲しいことが今回説明する、「擬似要素が使えるhtmlタグかどうか？」です。

擬似要素が使えないタグとは？？

例えば、imgタグです。

使えない理由は、閉じタグがないからです。

なぜ、閉じタグがないと使えないか？

→要は、閉じタグのない要素はカラ要素だと判断されるため、仕様的に擬似要素が適用出来ません。

imgタグ以外にも、selectタグや、optionタグ、お同じですね。

擬似要素が適用できないときはチェックすべき項目ですね。

参考

・imgタグにafter要素（疑似要素）はつけれないだとーーー！！