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

css

2022-10-06

疑似要素「: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で画像を指定する今回の方法は、スクリーンリーダーで読み上げられません。アクセシビリティを考えると装飾の目的で使用するのがよさそう。

-css

関連記事

スクロールがひっかかる?反発して動かない、ページが読めない場合に対応したこと

スクロールできない! スマホでスクロールしようとして気が付きました。(PCでは分かりづらかった) スクロールしようとしても画面が動かない、下にもコンテンツがあるのに閲覧できないことがあったんです。 リ …

テキストに縁や影をつける

cssでテキストに縁や影をつけます。

隣接セレクタ・間接セレクタ・直下セレクタでCSSを記述したい

隣接セレクタ・間接セレクタ・直下セレクタとは? 隣接セレクタ 要素を結合子「+」でつなぎます。例えば要素A+要素Bの場合、要素Aと同じ階層にあるすぐ後の要素Bにスタイルがつきます。 間接セレクタ 要素 …

CSSで影をつける

CSSでドロップシャドウをつける方法を二つ紹介します。

cssのanimationを使ったGIFアニメのようなSVGのパラパラ漫画を作りたい!

CSSで作るレスポンシブ対応のスプライトアニメーション やりたいこと ・JavaScriptは使わず、cssのanimationを使った簡単なアニメーション ・レスポンシブ対応 ・拡大しても画質が変わ …