如何阻止伪元素:before内的SVG溢出父div容器高度范围

• 父容器.pseudo--code没有设置position: relative作为绝对定位伪元素的定位上下文，伪元素实际是相对更上层的祖先元素定位，给伪元素设置的max-height: 100%参考的根本不是300px高的目标父容器。
• 溢出裁剪overflow: hidden需要加在父容器上生效，给自身是绝对定位的伪元素加overflow没有裁剪效果，无法约束超出父容器范围的内容。
• 直接通过content属性引入的SVG属于替换元素，默认会按照自身原生尺寸渲染，仅设置宽度不会自动等比缩放高度，很容易超出容器。
• 代码存在语法笔误：opacity; 0.1错把属性和值之间的冒号写成分号，透明度规则不生效；另外选择器.pseudo-code:before类名少写了一个横杠，对应的公共样式未命中。

推荐优先使用背景图引入SVG的方式，尺寸可控性最高，步骤如下：

1. 给父容器补充定位上下文和溢出裁剪规则

.pseudo--code {
  height: 300px;
  max-height: 300px;
  padding-left: 20px;
  /* 新增以下两行 */
  position: relative;
  overflow: hidden;
}

2. 把伪元素的SVG改为背景引入，通过background-size控制缩放规则，同时修正原有语法错误

.pseudo--code:before {
  position: absolute;
  content: "";
  /* 背景引入SVG */
  background: url("https://d33wubrfki0l68.cloudfront.net/96dbb28f6281e8f1cda214c22b571de137716690/bdc12/assets/numbers-light.svg") no-repeat left top;
  /* 等比缩放SVG，完全适配伪元素尺寸不溢出 */
  background-size: contain;
  width: 10em;
  height: 100%;
  left: 10px;
  top: 0;
  /* 修正原来的分号笔误 */
  opacity: 0.1;
}

3. 修正公共样式的类名笔误，把.pseudo-code:before改为.pseudo--code:before，保证伪元素的上下定位规则生效。

如果你一定要保留content直接引入SVG的写法，只需要给伪元素补充object-fit规则即可：

.pseudo--code:before {
  position: absolute;
  content: url("https://d33wubrfki0l68.cloudfront.net/96dbb28f6281e8f1cda214c22b571de137716690/bdc12/assets/numbers-light.svg");
  display: block;
  width: 10em;
  height: 100%;
  /* 让SVG在设定的尺寸内等比缩放，不溢出 */
  object-fit: contain;
  left: 10px;
  top: 0;
  opacity: 0.1;
}

注意：这种写法依然需要父元素提前设置position: relative和overflow: hidden兜底。

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