2022.07.15

HTML・CSS

擬似要素::before、::afterと:hoverの組み合わせ

CSSの擬似要素::before、::afterに:hoverでホバーエフェクトを適用する場合、以下のように:hoverを先、::before、::afterを後に記述します。

a::before {
  background: #ff0000;
  transition: .3s;
}

a:hover::before {
  background: #ffffff;
}

上記の例で:hoverと::beforeを逆に書くと動作しないので注意が必要です。

//動作しない
a::before:hover {
  background: #ffffff;
}

関連記事

2020.10.15

HTML・CSS

マウスオーバー時にCSSのtransitionプロパティを実装する場合の注意点

デモページはこちら マウスオーバー時にCSSのtransitionプロパティを実装する場合の注意点です。以下のhtml構造でテストします。 .photo01 a…

2021.02.02

HTML・CSS

flex-growプロパティを利用した横並びのリスト

flex-growプロパティを利用して、左右にボーダーのある横並びのリストを作ります。リスト内のテキストの文字数が異なる場合でも、簡単にレスポンシブ対応できます…

2020.10.03

HTML・CSS

WAI-ARIAのaria-current属性で現在位置を指定

デモページはこちら ナビゲーションメニューにWAI-ARIAのaria-current属性で現在位置を指定します。jQueryでページのURLを判別し、対象のa…

2024.06.14

HTML・CSS

90°回転させた要素をブロック要素内右側に収めるtransform-originの設定

右上に配置した長方形の要素を90°回転させた時に、親のブロック要素内に収めるtransform-originの設定です。デモページはこちら htmlは以下のよう…

2021.07.12

HTML・CSS

CSSカスタムプロパティの使い方

CSSカスタムプロパティはCSS変数とも呼ばれ、CSS内に変数を定義して各プロパティの値で呼び出して使用します。一般的に変数は:rootに定義してグローバル変数…

上に戻る