:afterCSSプロパティの動作がわかりません。仕様によると（こことここ）：
名前が示すように、
:beforeおよび:after疑似要素は、要素のドキュメント ツリー コンテンツの前後のコンテンツの場所を指定します。
:afterこれは、どの要素が(または:before) プロパティを持つことができるかについて制限を課していないようです。ただし、特定の要素でのみ機能するようです...<p>機能する、<img>機能しない、<input>機能しない、<table>機能します。もっとテストできますが、要点はわかります。これはブラウザ間でかなり一貫しているように見えることに注意してください。オブジェクトがandプロパティを受け入れることができるかどうかを決定するものは何ですか?:before: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および疑似要素をサポートしていないようです。の場合、IE および Chrome は、生成されたコンテンツを;の実装である枠付きボックス内に配置します。中身が箱の背を高くします。Firefox は、両方の (!) 疑似要素のコンテンツを、 の実装である水平ルールの後に配置します。このバリエーションは、CSS 2.1 で言及されている「相互作用」の問題の種類を示しています。:beforehrhrhrhr
これらの疑似要素は、HTML 定義でコンテンツが許可されていないため、空の要素には使用できないとよく言われます。これはカテゴリーエラーです。マークアップ言語の構文規則は、CSS でできることを制限しません
結論として、:afterand:beforeは現在空の要素には使用できません (わずかに を除くhr) が、これは主に実装によるものであり、将来変更される可能性があります。