【初心者向け】CSSの基本テクニック：a要素のbeforeとafter擬似要素を使ってホバー効果を適用する方法

2024-04-13

CSSで:hover擬似クラスを使ってa要素のbeforeとafter擬似要素を装飾する方法

このチュートリアルでは、CSSの擬似クラス:hoverを使って、a要素の:beforeと:after擬似要素にホバー効果を適用する方法を解説します。

擬似要素は、HTML要素に追加情報や装飾を追加するために使用される特殊な要素です。:beforeと:afterは、擬似要素の2つの例です。これらの擬似要素は、既存の要素の前後にコンテンツを追加するために使用できます。

:hover擬せクラスは、マウスポインタが要素の上を移動したときに適用される特殊なスタイルルールです。この擬似クラスを使用して、要素にホバー効果を追加できます。

ステップバイステップガイド

HTMLでa要素を作成する

まずは、HTMLでa要素を作成します。この要素には、リンク先となるURLを設定します。

<a href="#">リンクテキスト</a>

:beforeと:after擬似要素にスタイルを適用する

次に、CSSを使用して:beforeと:after擬似要素にスタイルを適用します。この例では、擬似要素を非表示にし、幅と高さを設定します。

a:before,
a:after {
  content: "";
  display: none;
  width: 0;
  height: 0;
}

:hover擬似クラスを使って:beforeと:after擬似要素にホバー効果を追加する

a:hover:before,
a:hover:after {
  display: block;
  width: 50px;
  height: 50px;
}

オプションで:beforeと:after擬似要素に背景色やボーダーを追加する

a:hover:before {
  background-color: #f00;
}

a:hover:after {
  background-color: #00f;
}

完成例

上記のコードを組み合わせると、以下のようになります。

<a href="#">リンクテキスト</a>

a:before,
a:after {
  content: "";
  display: none;
  width: 0;
  height: 0;
}

a:hover:before,
a:hover:after {
  display: block;
  width: 50px;
  height: 50px;
}

a:hover:before {
  background-color: #f00;
}

a:hover:after {
  background-color: #00f;
}

このコードを実行すると、リンクにマウスポインタを合わせると、リンクの前後に赤い四角形が表示されます。

補足

この例では、:beforeと:after擬似要素に同じホバー効果を適用していますが、異なる効果を適用することもできます。
擬似要素の位置を調整するには、positionプロパティを使用できます。

サンプルコード：CSSでhover擬似クラスを使ってa要素のbeforeとafter擬似要素を装飾する方法

<!DOCTYPE html>
<html>
<head>
<title>Hover Effect on Pseudo Elements</title>
<style>
a {
  text-decoration: none;
  color: black;
}

a:before,
a:after {
  content: "";
  display: none;
  width: 0;
  height: 0;
}

a:hover:before,
a:hover:after {
  display: block;
  position: absolute;
}

a:hover:before {
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background-color: #f00;
}

a:hover:after {
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  background-color: #00f;
}
</style>
</head>
<body>
<a href="#">リンクテキスト</a>
</body>
</html>

四角形はリンクの幅と同じ高さになります。
四角形はリンクの上部と左右に配置されます。

説明

aセレクタは、すべてのa要素を選択します。
text-decoration: none;プロパティは、a要素のデフォルトのテキスト装飾（下線など）を削除します。
color: black;プロパティは、a要素のテキストの色を黒に設定します。
a:beforeとa:afterセレクタは、a要素のbeforeとafter擬似要素を選択します。
content: "";プロパティは、擬似要素にコンテンツを設定しません。
display: none;プロパティは、擬似要素を非表示にします。
width: 0;とheight: 0;プロパティは、擬似要素の幅と高さを0に設定します。
position: absolute;プロパティは、擬似要素を静的に配置できるようにします。
top: 0;とleft: 0;プロパティは、擬似要素をa要素の左上に配置します。
background-color: #f00;プロパティは、擬似要素の背景色を赤に設定します。

このコードは、hover擬似クラスを使ってa要素のbeforeとafter擬似要素にホバー効果を適用する基本的な例です。ご自身のニーズに合わせてコードをカスタマイズすることができます。

追加の例

以下のコードは、beforeとafter擬似要素に異なるホバー効果を適用する例です。

<!DOCTYPE html>
<html>
<head>
<title>Hover Effect on Pseudo Elements</title>
<style>
a {
  text-decoration: none;
  color: black;
}

a:before,
a:after {
  content: "";
  display: none;
  width: 0;
  height: 0;
}

a:hover:before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  border: 5px solid #f00;
}

a:hover:after {
  display: block;
  position: absolute;
  top:

CSSでa要素のbeforeとafter擬似要素にホバー効果を適用するその他の方法

背景画像を使用して、beforeとafter擬似要素にホバー効果を適用することができます。この方法は、アイコンやその他の画像を表示したい場合に適しています。

a:before,
a:after {
  content: "";
  display: none;
  width: 0;
  height: 0;
}

a:hover:before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background-image: url("icon.png");
}

a:hover:after {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  background-image: url("icon2.png");
}

a:before,
a:after {
  content: "";
  display: none;
  width: 0;
  height: 0;
}

a:hover:before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background-image: url("icon.svg");
}

a:hover:after {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  background-image: url("icon2.svg");
}

a:before,
a:after {
  content: "";
  display: none;
  width: 0;
  height: 0;
}

a:hover:before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background-image: linear-gradient(to right, red, blue);
}

a:hover:after {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  background-image: linear-gradient(to right, #00f, #f00);
}

a:before,
a:after {
  content: "";
  display: none;
  width: 0;
  height: 0;
}

a:hover:before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background-shape: polygon(50% 0%, 0% 50%, 100% 50%);
}

a:hover:after {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  background-shape: polygon(0% 0%, 50% 100%, 100% 0%);
}