inputにbeforeやafterは使えない

フォームの送信ボタンに矢印を付けようとしてすこし悩んだので、対応方法をメモしておきます。

サンプルコード1

inputにafterを使ってつけようと思ったのですが、うまく表示されませんでした。

HTML

<input type="submit" value="送信" class="formbtn" />

CSS

.formbtn {
	display: block;
	width: 300px;
	margin: 50px auto;
	border: #666666 1px solid;
	border-radius: 4px;
	padding: 10px 0;
	color: #ffffff;
	font-size: 16px;
	text-align: center;
	background: #333333;
	cursor: pointer;
}
.formbtn:after {
	content: '';
	display: inline-block;
	position: relative;
	top: -1px;
	width: 7px;
	height: 7px;
	vertical-align: middle;
	margin-left: 5px;
	border: #ffffff 2px solid;
	border-top: none;
	border-left: none;
	transform: rotate(-45deg);
}
.formbtn:hover {
	background: #666666;
}

inputにafterを使った場合のデモページ
置換インライン要素に対してはbeforeやafterは使えないようです。
　

サンプルコード2

代わりにbutton要素で対応しました。

HTML

<button type="submit" class="formbtn">送信</button>

buttonにafterを使った場合のデモページ
inputのtype=imageで画像にしようかと思いましたが、今回はボタンのサイズがリキッドなのでこのように対応しました。
　

【参考サイト】

• imgとかinputなどの置換要素にはbefore, afterは使えないよ – しるてく