好久没写 CSS 了，我想写个定长定宽的 ::after 放在 <img> 后面做效果，但是塞不到底下，查了下是写 z-index: -1 这种老方法。但是这方法了在套娃的情况下就不行了，直接跑到最下面了，蓝后就查了下，发现可以用 transform 解决。
最顶上被选用的回答就是常见的 z-index: -1，但是有个条件，就是东西都在 <body> 里面，结构大概如下：
<body>
<div class="a">
::after
</div>
</body>这样的 -1 才有用。那如果套娃呢？结构如下：
<body>
<div class="bg">
<div class="a">
::after
</div>
</div>
</body>这时候还用 z-index: -1 的话 ::after 就跑到 .bg 底下了。所以就用了另一个东西：transform-style，把变换方式从平面改成 3D 就可以啦。结构还是上面这套娃，SCSS 如下：
.bg{bgc:#ccc}
.a {
transform-style: preserve-3d;
&::after {
transform: translateZ(-1px);
}
}这样 ::after 就会相对往后缩 1px，不就可以跑后面去了，美滋滋。根据 Can I Use 的显示，绝大部分浏览器都兼容的，UC 啥的不清楚，也懒得理，总之就是爽。
20220312 Update：<img> 标签不能用 ::before 和 ::after，还有几个标签也不能用，又掉进另一个坑了。原因：
The before and after pseudo-selectors don't insert HTML elements — they insert text before or after the existing content of the targeted element. Because image elements don't contain text or have descendants, neither
——coreywardimg:beforeorimg:afterwill do you any good. This is also the case for elements like<br>and<hr>for the same reason.
简单来说就是 ::before 和 ::after 是往元素里面插文字的，但是 <img> 里面没有内容，所以就无效了，<br> 和 <hr> 也同理。
我是笨蛋小扁担
太强啦！Eiko YYDS 学习了
Eiko 回复 我是笨蛋小扁担
带我飞
fred
学习一下