CSSの:beforeと:after疑似要素を使ったミラーエフェクトの作成方法

ミラーエフェクトを作成するためには、以下の手順に従ってください。

HTMLの要素を作成します。例えば、div要素を使用します。

<div class="mirror-effect"></div>

CSSで要素に幅と高さを設定します。

.mirror-effect {
  width: 200px;
  height: 200px;
}

:beforeまたは:after疑似要素を使用して、要素の一部を反転させます。反転させる部分にはコンテンツを追加する必要があります。

.mirror-effect:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scaleY(-1);
  background-color: rgba(0, 0, 0, 0.5); /* 適宜、背景色や透明度を調整してください */
}

この例では、要素の上半分が反転されて黒い半透明の背景が表示されます。必要に応じて、他のスタイルを追加して見た目をカスタマイズすることもできます。

もし要素全体を反転させるのではなく、一部のテキストやアイコンを反転させたい場合には、適用したい要素にクラスを追加し、そのクラスに対して:beforeまたは:after疑似要素を使用します。

以上が、CSSの:beforeと:after疑似要素を使ったシンプルで簡単なミラーエフェクトの作成方法です。この方法を応用すれば、さまざまな要素にミラーエフェクトを追加することができます。ぜひ試してみてください。