CSS：特定の要素にコンテンツを追加しない後

CSS :afterプロパティの動作を理解できません。仕様によると（こことここ）：

名前が示すように、:beforeおよび:after擬似要素は、要素のドキュメントツリーコンテンツの前後のコンテンツの場所を指定します。

これは、:after（または:before）プロパティを持つことができる要素に制限を課すようには見えません。ただし、特定の要素でのみ機能するようです... <p>機能<img>しますか、<input>機能しません、<table>機能しません。もっとテストすることはできますが、要点はわかります。これはブラウザ間でかなり一貫しているように見えることに注意してください。オブジェクトが:beforeand :afterプロパティを受け入れることができるかどうかを決定するものは何ですか？

imgとinputはどちらも置き換えられた要素です。

置換された要素は、その外観と寸法が外部リソースによって定義されている要素です。例としては、画像（含む<img>タグ）、プラグイン（<object>タグ）、及びフォーム要素（<button>、<textarea>、 <input>、および<select>タグ）。他のすべての要素タイプは、非置換要素と呼ぶことができます。

:beforeおよび:after非置換要素を有する唯一の作品。

スペックから：

注意。この仕様は、置換された要素（HTMLのIMGなど）:beforeとの相互作用を完全には定義していません :after。これは、将来の仕様でより詳細に定義されます。

を使用するspan:before, span:afterと、DOMは次のようになります。

<span><before></before>Content of span<after></after></span>

明らかに、これはで動作しません<img src="" />。

:beforeそして、:afterされていない必要な置換要素のために仕事に、そしてCSSの仕様は、彼らが彼らのために働くだろうか指定していない、と置き換え要素の概念はやや曖昧です。

CSS 2.1仕様では、それらが置換された要素に対して機能することを明確に示唆しており、その方法は「完全に定義」されていないだけです。これは、置き換えられた要素には、CSSによって制御されない独自の視覚的レンダリングがあると予想されるが、疑似要素は要素のコンテンツに何かを追加する必要があるという問題に関連しています。仕様では、これは将来の仕様で「より詳細に」定義されると追加されていますが、これは今のところ行われていません。

ブラウザベンダーは、一部の要素に対してこれらの疑似要素をまったく実装しないことで問題を回避することを決定しました。

「置き換えられた要素」が何を意味するのかはまったく明確ではなく、意味が多少変更されたようです。多くの場合、空の要素（EMPTYコンテンツが宣言されていない要素、つまりコンテンツを持つことができない要素）と同じ意味として解釈されますが、CSS 2.1自体にセレクター付きのサンプルスタイルシートbr:beforeが表示されます（ブラウザーはこれを無視し、br独自のスタイルシートを実装しています）仕方）。少なくとも部分的には、ますます多くの要素がCSSレンダリングのスコープに移動したと主張できます。たとえば、input要素（そのフォント、色などを含む）は、最新のブラウザーのCSSで主に制御できます。

現在のブラウザ（Firefox、IE、Chrome）は、以外の空の要素の:afterおよび:before疑似要素をサポートしていないようですhr。の場合hr、IEとChromeは生成されたコンテンツを境界ボックス内に配置します。これはの実装ですhr。内容によってボックスの高さが高くなります。Firefoxは、両方の（！）擬似要素のコンテンツを、その実装である水平方向のルールの後に配置しhrます。このバリエーションは、CSS 2.1で言及されている「相互作用」の問題の種類を示しています。

これらの疑似要素は、HTML定義でコンテンツが許可されていないため、空の要素には使用できないとよく言われます。これはカテゴリエラーです。マークアップ言語の構文規則は、CSSで実行できることを制限しません。

結論として、 :after、:before現在は空の要素には使用できません（ただし、のわずかな例外を除くhr）。これは主に実装が原因であり、将来変更される可能性があります。

終了タグのない要素はvoid要素であり、その中にコンテンツを表示できません。

https://www.w3.org/TR/html5/syntax.html#void-elements

すべてのBlink、Webkit、およびQuantumブラウザーでは、チェックボックスでのみ疑似要素を作成できますが、仕様でこの動作を許可していないため、これは議論の余地があります。

ここに例：https : //codepen.io/equinusocio/pen/BOBaEM/

input[type="checkbox"] {
  appearance: none;
  color: #000;
  width: 42px;
  height: 24px;
  border: 1px solid currentColor;
  border-radius: 100px;
  cursor: pointer;
  transition: all 100ms;
  background-size: 30%;
  outline: none;
  position: relative;
  box-sizing: border-box;
  background-color: #eee;
  transition: background-color 200ms;

  &::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    bottom: 2px;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background-color: currentColor;
    will-change: transform;
    transition: transform 200ms cubic-bezier(.01,.65,.23,1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }

  &:checked {
    background-color: aquamarine;

    &::before {
      transform: translateX(100%);
    }
  }
}