CSS 授業予習メモ【ワードプレス教室 横浜スクール】

INPUTにはbefore疑似クラスが効かない。
INPUTをSPANで囲み、SPANのスタイルとして適用。

<span class=”button”><input type=”submit” value=”カートに入れる”></span>

button, input[type=”button”], input[type=”reset”], input[type=”submit”] {
background-color: transparent;
}

.button:before {
content: “\0000a0”;
display: inline-block;
height: 24px;
width: 24px;
line-height: 24px;
margin: 0 4px -6px -4px;
position: relative;
top: -1px;
left: -6px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABWElEQ…IvxnN5Us3sQ5zfPIkre3K75cLUEg75Ks5FW5TyJNXI9fwDH4BGFi3u5H4AAAAASUVORK5CYII=) no-repeat left center transparent;
background-size: 100% 100%;
}