imgタグやinput[type=”text”]には疑似要素が使えない。
imgタグに使えないのは知っていたのですが
そういえばボタンやinput[type=”text”]には使えないのに、
input[type=checkbox]なんかは疑似要素使って見栄え変えてる人いるなー？と
思ったのでテストしてみました。
結果の画像
結構有効になりますね…。どうゆう基準なんだろう。
rangeなんかは疑似要素が邪魔して右半分まで持っていけなかったり
テストしたHTML
<p>段落</p>
<ul>
<li><input type="text" value="text"></li>
<li><label><input type="radio">radio</label></li>
<li><label><input type="checkbox">checkbox</label></li>
<li><input type="button" value="ボタン"></li>
<li><input type="color"></li>
<li><input type="date"></li>
<li><input type="datetime-local"></li>
<li><input type="month"></li>
<li><input type="email" placeholder="email"></li>
<li><input type="file"></li>
<li><input type="number" placeholder="number"></li>
<li><input type="password" placeholder="password"></li>
<li><input type="range"></li>
<li><input type="image"></li>
</ul>
指定したCSS
input::after,
p::after{
content:'【before】';
display:inline-block;
}
