如何使SVG伪元素自适应不同父容器的尺寸与对齐方式？

我来帮你搞定这个SVG自适应的难题！你之前的代码里用content: url()直接引入SVG，这种方式的问题在于SVG的尺寸是硬编码死的，没法随着父元素（h4和small）的字体大小自动调整，而且对齐也很难统一。下面是改进后的方案，能让SVG完美适配不同的容器：

核心思路 #

• 把SVG作为伪元素的背景图，而不是直接用content: url()，这样可以通过background-size灵活控制尺寸
• 使用em单位设置伪元素的尺寸，因为em会继承父元素的字体大小，自动适配h4和small的不同字号
• 通过绝对定位+垂直居中变换，让SVG始终和文本对齐

修改后的代码 #

CSS代码 #

.mydiv {
  /* 让元素和文本在同一行显示 */
  display: inline-block;
  /* 为伪元素预留右侧空间，避免和文本重叠 */
  padding-right: 1.8em;
  /* 作为伪元素的定位参考 */
  position: relative;
}

.mydiv:after {
  content: '';
  /* 绝对定位到父元素右侧 */
  position: absolute;
  right: 0;
  /* 垂直居中对齐父元素文本 */
  top: 50%;
  transform: translateY(-50%);
  /* 用em单位，继承父元素字体大小实现自适应 */
  width: 1.2em;
  height: 1.2em;
  /* 加载SVG背景图，注意URL编码的正确性 */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32,43.71a3,3,0,0,1-2.12-.88L12.17,25.12a2,2,0,0,1,0-2.83l1.42-1.41a2,2,0,0,1,2.82,0L32,36.47,47.59,20.88a2,2,0,0,1,2.82,0l1.42,1.41a2,2,0,0,1,0,2.83L34.12,42.83A3,3,0,0,1,32,43.71Z'/%3E%3C/svg%3E");
  /* 确保SVG完整显示，不变形 */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

HTML代码 #

<h4><div class="mydiv">标题内容</div></h4> 
<small><div class="mydiv">辅助内容</div></small>

关键细节解释 #

• display: inline-block：让.mydiv和文本处于同一行，避免伪元素跑到换行后的位置
• em单位：1.2em的尺寸会根据父元素（h4的字号大，small的字号小）自动缩放，实现SVG的自适应
• 垂直居中：top: 50%加上transform: translateY(-50%)是垂直居中的经典技巧，不管父元素的高度如何，SVG都能和文本对齐
• SVG编码：把SVG中的<换成%3C，>换成%3E，确保data URL能被浏览器正确解析，避免转义错误

这样修改后，h4里的SVG会自动比small里的大，而且两者都能和各自的文本完美对齐啦！

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