inputタグにbeforeが使えずに困っています

Question

inputタグにbeforeセレクタを用いて文章を入れようと思ったのですが、反応しません。どのような原因が考えられるのでしょうか？どなたか教えてください。

<div>
	<input type="text">
</div>

div {
	border: 2px solid black;
	width: 400px;
	height: 50px;
	text-align: center;
}
input:before {
	content: 'AAA';
}

Answer 1

CSS 3の仕様上、input、img、videoといった置換要素には::beforeや::afterによる擬似要素の生成は対応していません（情報元）。

Comments

[pythago]

ありがとうございます！

Answer 2

input要素の代わりにbutton要素で機能を代用すれば、::before/::afterも使えます。
どうしても擬似要素を使いたければ要素変更を検討されると良いと思います。

Comments

[pythago]

置換要素というものがあることを知りませんでした。
ありがとうございます。