擬似要素:afterと擬似クラス:hoverを組み合わせるテクニック

2024-06-26

CSSの擬似要素 :after と擬似クラス :hover を組み合わせることで、要素にホバー効果を追加することができます。この方法は、ボタンやリンクなどに視覚的なフィードバックを追加するのに役立ちます。

基本的な仕組み

擬似要素 :after でコンテンツを追加する:
- :after 擬似要素は、要素の直後にコンテンツを追加するために使用されます。このコンテンツは、テキスト、画像、形状など、任意のものでることができます。
- 初期状態では、このコンテンツは非表示または目立たないように設定されます。
擬似クラス :hover でスタイルを変更する:
- :hover 擬似クラスは、マウスカーソルが要素の上を移動したときに適用されるスタイルを定義するために使用されます。
- このスタイルを使用して、after 擬似要素のコンテンツを表示したり、その外観を変更したりすることができます。

例

.button {
  position: relative; /* :after 擬似要素を要素内で配置するために必要 */
  display: inline-block;
  padding: 10px 20px;
  background-color: #4CAF50; /* ボタンの背景色 */
  color: white;
  text-decoration: none;
  cursor: pointer;
}

.button:after {
  content: ''; /* 擬似要素にコンテンツを追加 */
  position: absolute; /* 要素内で擬似要素を配置 */
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  background-color: #4CAF50; /* 擬似要素の背景色 */
  transition: width 0.3s ease; /* アニメーションを追加 */
}

.button:hover:after {
  width: 100%; /* ホバー時に擬似要素の幅を100%に拡張 */
}

説明

この例では、ボタンにホバー効果を追加しています。

最初に、.button クラスセレクタを使用してボタンの基本的なスタイルを定義します。
次に、.button:after セレクタを使用して、after 擬似要素のスタイルを定義します。この擬似要素は、ボタンと同じ背景色を持つ非表示の矩形として作成されます。
最後に、.button:hover:after セレクタを使用して、hover 状態における after 擬似要素のスタイルを定義します。このスタイルでは、擬似要素の幅をアニメーションを使用して 100% に拡張することで、ボタン全体を覆うようにします。

応用例

このテクニックは、さまざまな方法で応用できます。以下にいくつかの例を示します。

ボタンに影を追加する
リンクに下線を引く
メニュー項目を強調表示する
画像の上にキャプションを表示する

サンプルコード：CSSでボタンにホバー効果を追加する

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS ホバー効果</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <button class="button">ボタン</button>
</body>
</html>

CSS

.button {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  text-decoration: none;
  cursor: pointer;
}

.button:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  background-color: #4CAF50;
  transition: width 0.3s ease;
}

.button:hover:after {
  width: 100%;
}

このコードは次のように動作します。

HTML コードで、button 要素を作成します。

結果

このコードを実行すると、ボタンに以下のホバー効果が適用されます。

マウスカーソルがボタンの上を移動すると、ボタンの背景色が少し暗くなります。

カスタマイズ

ボタンの色を変更するには、.button セレクタの background-color プロパティを変更します。
擬似要素の形状を変更するには、.button:after セレクタの width 、 height 、および border-radius プロパティを変更します。

このサンプルコードを参考に、独自のホバー効果を作成してみてください。

CSSで擬似要素 :after と擬似クラス :hover を組み合わせるその他の方法

三角形の矢印を作成する

この方法は、ボタンやリンクに三角形の矢印を追加するために使用できます。

.button {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  text-decoration: none;
  cursor: pointer;
}

.button:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  border-width: 5px 5px 0 0;
  border-style: solid;
  border-color: white;
  transition: transform 0.3s ease;
}

.button:hover:after {
  transform: translateY(-50%) rotate(90deg);
}

.button:after セレクタを使用して、after 擬似要素を三角形の矢印として定義します。
border-width 、 border-style 、および border-color プロパティを使用して、矢印の形状と色を定義します。
transition プロパティを使用して、ホバー時に矢印が回転するようにアニメーションを設定します。

波線を追加する

.button {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
}

.button:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #4CAF50;
  animation: wave 2s linear infinite;
}

@keyframes wave {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(50%);
  }
  100% {
    transform: translateX(100%);
  }
}

background-color プロパティを使用して、波線の色を定義します。
@keyframes wave ルールを使用して、アニメーションの動きを定義します。

波線がボタンの反対側まで到達すると、右から新しい波線が現れます。

.button {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba