镜像 CSS 一个伪 :after 或 :before

镜像（或翻转）一个图像或文本是在前端开发中常见的一个需求。使用 CSS 伪元素 :after 或 :before 可以实现这个效果，而且这种方法不需要使用额外的 HTML 元素。本文将介绍如何使用 CSS 伪元素来实现镜像效果。

实现

我们以一个简单的例子为例子，假设我们有一个带有文本和图像的元素，现在我们想要把它们水平对称翻转。我们可以通过下面的 CSS 代码来实现：

.element {
  position: relative;
  transform: scale(-1);
}

.element::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  transform: scale(-1);
  background: inherit;
}

.element::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  transform: scale(-1) rotate(180deg);
  background: inherit;
}

以上代码中，我们给元素 .element 应用了 position: relative，然后使用 transform: scale(-1) 实现了水平翻转。接下来，我们使用 ::before 和 ::after 两个伪元素来分别实现两个镜像效果。在这里，我们使用 content: '' 来生成伪元素。然后使用 position: absolute 给伪元素指定相对位置，并使用 z-index: -1 让伪元素处于原始元素的下层。我们使用 top, left 来实现将伪元素放置在原始元素的重合区域，并使用 transform: scale(-1) 来完成伪元素的水平翻转。对于 ::before 伪元素，我们再使用 width 和 height 属性将它设置为和原始元素一样的大小，同时使用 background: inherit 将它的背景与原始元素相同。对于 ::after 伪元素，我们还使用了 rotate(180deg) 旋转将它上下翻转。

结论

使用 CSS 伪元素来实现镜像效果是非常容易的。我们可以使用 transform 属性来完成元素的水平翻转，并使用 ::before 和 ::after 伪元素来实现对称或者翻转的效果。在许多情况下，这种方法可以避免使用额外的 HTML 元素。