【CSS】疑似要素(:before、:after)で画像を表示する方法色々
疑似要素(:before、:after)を使って画像を表示する方法を幾つかまとめた。
scss
/* 画像をそのままのサイズでインライン配置 */ &:before { content: url(img/test.png); margin: 0 10px 0 0; position: relative; top: 2px; } /* インラインで配置(画像のリサイズ可)*/ &:before { content: ""; background: url(img/test.png) no-repeat center center; background-size: cover; width: 15px; height: 10px; margin: 0 10px 0 0; position: relative; top: 0; display: inline-block; } /* 画像を180°回転して配置 */ &:before { transform: rotateX(180deg); content: ""; background: url(img/test.png) no-repeat center center; background-size: cover; width: 15px; height: 10px; margin: 0 10px 0 0; position: relative; top: 0; display: inline-block; } /* 画像を絶対配置(親要素に「position: relative;」を設定) */ &:before { content: ""; background: url(img/test.png) no-repeat center center; background-size: cover; position: absolute; width: 15px; height: 10px; left: 10px; top: 50%; margin:-5px 0 0 0; }
コメントを残す