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;
}

関連記事

2021.09.12

HTML・CSS

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

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

2020.07.05

HTML・CSS

rubyタグでテキストにルビ（ふりがな）を振る

rubyタグとrtタグの二つを使ってテキストにルビ（ふりがな）を振ります。rtタグはふりがな、rubyタグはテキストとふりがな（rtタグを含む）の両方を囲います…

2025.08.08

HTML・CSS

fit-contentのセンタリングを利用した横幅可変のグラデーション背景

width: fit-contentを利用してテキストをセンタリングし、グラデーションの背景を表示します。デモページはこちら 以下のhtml構造で確認します。d…

2022.07.17

HTML・CSS

Google Fontsの読み込みをDNSプリフェッチで最適化

DNSプリフェッチを利用すると、外部ドメイン名（ホスト名）の名前解決（DNSルックアップ）を事前に強制できます。 WEBページ表示時ブラウザが外部ドメインにアク…

2020.08.23

HTML・CSS

マウスオーバー時にCSSのみでフェードイン・フェードアウトを実装する場合の注意点

マウスオーバー時にCSSのみでフェードイン・フェードアウトを実装する場合、display: none;で非表示、マウスオーバー時にdisplay: block;…

上に戻る