如何缩放CSS元素且不影响其:after伪元素？该需求是否可实现？

当然可以实现！这个问题的核心在于理解CSS transform的作用范围——当你给元素设置transform: scale()时，它会作用于元素本身以及所有属于它的子元素（包括伪元素），所以你的dot才会跟着一起缩放。下面给你几种实用的解决方案：

方法1：反向缩放伪元素抵消变换 #

这是最直接的思路：既然父元素放大了N倍，那给伪元素设置一个scale(1/N)的反向变换，就能抵消父元素的缩放效果。同时记得调整transform-origin来保证伪元素的位置符合预期。

示例代码：

/* 父元素缩放2倍 */
.target-element {
  transform: scale(2);
  position: relative; /* 确保伪元素定位正确 */
  /* 其他样式：宽度、高度、背景色等 */
}

/* 伪元素反向缩放0.5倍抵消父元素的缩放 */
.target-element:after {
  content: '.';
  position: absolute;
  /* 基础定位样式 */
  top: 100%;
  right: 0;
  /* 反向缩放 */
  transform: scale(0.5);
  transform-origin: top right; /* 这里的原点要和伪元素的定位匹配 */
  /* 其他样式：字体大小、颜色等 */
}

方法2：让伪元素脱离父元素的变换上下文 #

如果你的布局允许，可以把伪元素从父元素的transform作用范围内移出来。比如使用position: fixed（如果位置不需要随父元素滚动），或者把伪元素的父元素换成一个没有transform的容器，只给需要缩放的元素加transform。

示例代码：

/* 外层容器，不设置transform */
.container {
  position: relative;
}

/* 只给需要缩放的内部元素加transform */
.scaled-element {
  transform: scale(2);
  /* 其他样式 */
}

/* 伪元素挂载在容器上，不受内部元素缩放影响 */
.container:after {
  content: '.';
  position: absolute;
  top: 0;
  right: 0;
  /* 其他样式，完全不受scaled-element的缩放影响 */
}

方法3：用CSS变量实现动态抵消 #

如果你的缩放值是动态变化的（比如通过JS控制），用CSS变量来管理会更灵活。把缩放值存在变量里，父元素用变量缩放，伪元素用calc(1 / var(--scale))来计算反向缩放值。

示例代码：

.target-element {
  --scale: 1.5; /* 可以动态修改这个变量值 */
  transform: scale(var(--scale));
  position: relative;
}

.target-element:after {
  content: '.';
  position: absolute;
  transform: scale(calc(1 / var(--scale)));
  transform-origin: center; /* 根据需求调整原点 */
}

这几种方法里，方法1最适合快速解决现有问题，方法2适合重构布局避免嵌套变换，方法3适合需要动态调整缩放的场景，你可以根据自己的实际需求选择~

内容的提问来源于stack exchange，提问作者Quest