SVG通过::before伪元素显示异常：超出容器及尺寸不符问题排查

我希望通过::before伪元素插入的SVG能以18x18px的尺寸正常显示，但实际SVG未正确渲染且超出容器范围。单独在新标签页打开该SVG时，其尺寸确实为18x18px。请问为何示例中SVG会移出容器？我是否存在操作错误？

用content: url()给伪元素插SVG时，浏览器会把SVG当成外部图片处理，不会自动适配伪元素的设置，而且你这里犯了两个关键错误：

• 在CSS的data URI里用了HTML实体转义（<、>），这会让浏览器解析SVG代码出错，识别不了你设置的18x18尺寸，自然就乱渲染了；
• 伪元素默认是行内元素，插入的SVG作为替换元素，没被正确约束在容器里，再加上Bootstrap的默认样式影响，就容易溢出容器。

按下面两步调整就能解决：

1. 修正SVG的data URI格式：CSS里写SVG的data URI时，不用转义<和>，直接写原始SVG代码就行，注意把SVG内部的双引号换成单引号，或者用单引号包裹整个data URI内容；
2. 给伪元素加尺寸约束：给::before设置display: inline-block，再指定width和height为18px，最后用vertical-align让SVG和文本对齐，避免错位。

修改后的CSS代码 #

.row {
  background-color: red; 
}
.col-12 {
  background-color: green;
}
.bg-white {
  background-color: #fff;
}
.marketing {
    font-weight: 800;
}
.marketing .headline {
    margin: 1rem 0 1rem 10%;
}
.arrow::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-caret-right-fill" viewBox="0 0 18 18"><path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"></path></svg>');
    /* 添加尺寸和对齐控制 */
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 8px; /* 可选：和文本拉开间距 */
}

修改后的HTML代码 #

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row m-0">
  <div class="col-12 col-md-6 marketing p-0">
    <div class="headline">
      <span class="p-2 bg-white arrow">
        Test
      </span>
    </div>
  </div>
</div>

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