疑似要素を使ってアイコンをつけたい！アイコン画像を左右反転させたい！

PR　当ページのリンクには広告が含まれています。

疑似要素「:before」で要素の先頭に子要素のアイコンをつける

「:before」だと要素の先頭に子要素、「:after」だと要素の最後に子要素がつけられます。

テキストの前にアイコンをつける

contentを空にしてbackground-imageで画像を表示させます。

セレクタ{position:relative;padding-left:35px;}
セレクタ:before{
content: '';
display: block;
width: 30px; 
height: 30px;
background-image: url(images/icon.png);
background-size: contain;
background-repeat:no-repeat;
position:absolute;
top:0;
left:0;}

↑↑以降こちらを基本のコードとします。

アイコンがつきました。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

アイコンを上下センターに配置させたい時は基本コードのセレクタ:beforeにbottom:0;margin:auto;を追加します。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

画像の角度を変える

アイコンの角度を変える場合、基本コードのセレクタ:beforeにこちらを追加します。

transform: rotate( 30deg );

30degを指定したので時計回りに30度回転しました。
私はよく矢印の画像でこちらを使います（パソコンでは右向き矢印、スマホの時は下向き矢印（90度回転）等）。

画像を左右反転させる

アイコンを左右反転させる時は、基本コードのセレクタ:beforeにこちらを追加します。

transform: scaleX(-1);　またはtransform: scale(-1, 1);

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

画像を上下反転させる

アイコンを上下反転の時は、基本コードのセレクタ:beforeにこちらを追加します。

transform: scale(1, -1);　 またはtransform: scaleY(-1);

猫さんが逆さになってしまいました。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

注意

content:を''（空）でbackground-imageで画像を指定する今回の方法は、スクリーンリーダーで読み上げられません。アクセシビリティを考えると装飾の目的で使用するのがよさそう。