CSS 在 CSS 生成的内容(::after, ::before元素)上不起作用的转换问题

在本文中，我们将介绍 https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 中一个常见的问题：在 https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 生成的内容（::after, ::before 元素）上无法正确应用转换效果的情况。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

问题描述

在 CSS 中，我们可以通过使用伪元素（::after, ::before）来生成一些额外的内容，通常用于修饰现有元素或添加一些特殊效果。而通过 CSS 的 transform 属性，我们可以实现旋转、缩放、平移等各种二维或三维的变换效果。然而，在某些情况下，我们会遇到一个问题：在 CSS 生成的内容上应用 transform 属性时，效果不起作用。

问题分析

为了更好地理解这个问题，让我们来看一个具体的例子。假设我们有一个 div 元素，并使用 ::before 伪元素来为其添加一个装饰性的箭头：

div::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px;
  border-color: transparent transparent #000000 transparent;
  transform: rotate(45deg);
}

在这个例子中，我们给 div 元素的 ::before 伪元素添加了一个旋转角度为 45 度的变换效果。然而，如果你尝试在浏览器中运行这段代码，你会发现箭头并没有按照预期旋转。

原因分析

为什么 transform 属性在 CSS 生成的内容上不起作用呢？答案很简单：因为 CSS 生成的内容并不是一个独立的元素，它只是现有元素的一部分。在这种情况下，transform 属性并不会对它产生影响。

解决方法

那么，如何解决这个问题呢？其实，我们可以通过一些简单的技巧来实现 transform 效果在 CSS 生成的内容上的应用。

方法一：直接应用在生成内容的元素上

一种解决方法是将 transform 属性直接应用在生成内容的元素上，而不是伪元素本身。在上面的例子中，我们可以将 transform 属性应用在 div 元素上，而不是 ::before 伪元素上：

div {
  position: relative;
}

div::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px;
  border-color: transparent transparent #000000 transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

通过将 div 元素的定位设置为相对定位，并将 ::before 伪元素的定位设置为绝对定位，并使用 transform 属性进行旋转和平移操作，我们可以得到预期的结果。

方法二：使用嵌套元素

另一种解决方法是使用嵌套元素来实现 transform 效果。我们可以为伪元素添加一个子元素，并将 transform 属性应用在子元素上：

div::before {
  content: "";
  position: relative;
  z-index: -1;
}

div::before > span {
  display: inline-block;
  width: 100%;
  height: 100%;
  transform: rotate(45deg);
}

在这个例子中，我们给 ::before 伪元素添加了一个子元素 span，并在 span 元素上应用了旋转变换。通过将子元素的大小设置为与父元素相同，并将子元素的位置设置为相对定位，并为伪元素设置一个较低的层级（z-index），我们可以实现 transform 效果的应用。

示例

为了更好地理解这个问题和解决方法，让我们看一个完整的示例。假设我们要创建一个带有箭头的气泡提示框：

div {
  position: relative;
  width: 200px;
  padding: 20px;
  background-color: #ffffff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

div::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: #ffffff;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
}

div::before > span {
  display: inline-block;
  width: 100%;
  height: 100%;
  transform: rotate(45deg);
  background-color: #ffffff;
}

在这个示例中，我们使用 ::before 伪元素生成一个小的箭头，并在箭头上应用旋转变换。通过将箭头的位置设置为绝对定位，并通过 transform 属性进行平移操作，我们可以将箭头放置在气泡提示框的顶部。