空要素に対するCSSの疑似要素(:before, :after)指定

CSS

次の例で、テキストボックスの前、あるいはテキストボックス内に「hoge」という文字列の疑似要素は挿入されない。

<style>
input:before {
  content: "hoge";
}
</style>

<input>

CSS 2.1の仕様書にあたる。

As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content.

Generated content, automatic numbering, and lists

文書ツリー内容(Document tree content)を持たない要素(空要素)には、疑似要素内容は挿入されないようだ。

これを踏まえて、<input type="button">と<button></button>。

<style>
button:after,
input[type="button"]:after {
  content: "piyo";
}
</style>

<p>
  <input type="button" value="hoge">
  <button>hoge</button>

input要素のボタンのラベルは「hoge」のまま変わらず、button要素のボタンのラベルは「piyo」という文字列が後ろに挿入され、「hogepiyo」になる（ボタンの後ろに「piyo」という文字列が挿入されるわけではない）。

参考