仅用CSS在footer左侧添加SVG的布局问题求助

问题根源 #

你使用scale缩放伪元素时，元素的布局占位尺寸仍为原SVG的大小，仅视觉上缩小，因此会超出footer范围。以下是两种符合要求的解决方案：

方案一：修复现有伪元素的溢出问题（推荐） #

无需修改原footer规则，仅给footer::before补充规则，用直接设置宽高替代scale（避免占位尺寸异常）：

footer::before {
  content: url(https://img.uefa.com/imgml/uefacom/ucl/2021/logos/logo_dark.svg);
  float: left;
  /* 新增规则 */
  display: inline-block;
  width: 40px; /* 适配footer 50px高度的合适尺寸 */
  height: 40px;
  margin: 5px; /* 上下左右留边，与footer内容对齐 */
  object-fit: contain; /* 保持SVG比例，避免拉伸变形 */
}

/* 可选：调整footer内容的位置，避免被SVG覆盖并垂直居中 */
footer > * {
  margin-left: 50px; /* 与SVG宽度+margin匹配 */
  display: inline-block;
  vertical-align: middle;
}

方案二：将SVG直接嵌入CSS（符合作业"SVG写入CSS文件"要求） #

之前嵌入失败是因为未正确转义SVG中的特殊字符。需将SVG代码中的<、>、&等转义为URL编码（如<→%3C，>→%3E，#→%23），再用data:image/svg+xml格式写入content：

footer::before {
  /* 示例：嵌入简化版UCL SVG，实际替换为你需要的编码后的SVG代码 */
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23000'%3E%3Cpath d='M50 0L100 100H0L50 0Z'/%3E%3C/svg%3E");
  float: left;
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: 5px;
  object-fit: contain;
}

/* 同方案一，调整footer内容位置 */
footer > * {
  margin-left: 50px;
  display: inline-block;
  vertical-align: middle;
}

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