Html svg 内容超过元素

.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>');
    vertical-align: text-bottom;
    display: inline-block;
    height: 18px;
    outline: 1px solid red;
}

<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>

.original::before {
  content: url('data:image/svg+xml,<svg \
  width="18" \
  height="18" \
  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 5"><rect width="100%" height="100%" fill="lime" stroke="green" opacity=".7"/></svg>');
}

.fixed::before {
  display: inline-block;
  width: 18px;
  height: 18px;
  content: url('data:image/svg+xml,<svg \
  width="18" \
  height="18" \
  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 5"><rect width="100%" height="100%" fill="lime" stroke="green" opacity=".7"/></svg>');
}
/* demonstrative: */
span::before { background-color: red; outline: 1px solid blue; }
span::after { content: ' ' attr(class); }
html { background: dimgrey; color: snow;  }

<span class="original"></span>

<hr>

<span class="fixed"></span>