如何让SVG适配div::after伪元素并居中显示？

首先，你当前用content: url()插入SVG的方式很难灵活控制它的尺寸和位置——通过content插入的替换元素（比如SVG）会保持自身原始尺寸，不会自动继承伪元素的宽高。推荐改用背景图片的方式来实现，这样能轻松利用CSS背景属性完成适配和居中需求。

修改后的代码 #

div::after {
  content: ''; /* 清空content，改用背景图承载SVG */
  display: inline-block;
  width: 50px;
  height: 100px;
  /* 背景色 + 背景图 + 居中定位 + 按比例适配 + 禁止重复 */
  background: rgb(124, 124, 124) url('https://upload.wikimedia.org/wikipedia/commons/c/c6/Inkscape-small.svg') center/contain no-repeat;
}

<div></div>

关键属性说明 #

• background-position: center：让SVG在伪元素容器内水平、垂直方向都居中对齐
• background-size: contain：让SVG按自身宽高比例缩放，完整显示在50px×100px的容器范围内，不会超出边界
• background-repeat: no-repeat：避免SVG因容器尺寸过大而重复平铺

为什么不推荐content: url()？ #

如果坚持用content: url()，你需要手动计算缩放比例并通过transform调整位置，这种方法非常不灵活（SVG原始尺寸变化时就得重新计算）。举个假设SVG原始宽高为64px×64px的示例：

div::after {
  content: url('https://upload.wikimedia.org/wikipedia/commons/c/c6/Inkscape-small.svg');
  display: inline-block;
  width: 50px;
  height: 100px;
  background: rgb(124, 124, 124);
  /* 先缩放至容器可用比例，再调整居中 */
  transform: scale(0.78125) translate(-64%, -64%);
  transform-origin: top left;
}

显然这种方法远不如背景图方案简洁可靠。

另外你提到“无法对伪元素内部的内容应用样式”，这是因为通过content或背景图引入的外部SVG是独立资源，CSS无法穿透到SVG内部修改样式（比如颜色）。如果需要修改SVG内部样式，你得把SVG代码内联为data URI（比如转成base64），但这会增加代码长度，仅在必要时使用。

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