如何使用CSS :before伪元素在Oxy的div元素前添加SVG

你之前CSS实现失败大概率是伪元素缺少必填属性、定位锚点没设置对，下面给两种可直接复用的方案：

• 方案1：纯CSS伪元素实现（无需调整DOM结构，直接在Oxy的自定义CSS面板粘贴即可）
  首先给目标div添加一个自定义类名（比如oxy-target-div），然后写入以下CSS，根据你的实际尺寸调整数值即可：

/* 父容器设置相对定位，作为SVG的定位基准，同时留出SVG摆放的空间 */
.oxy-target-div {
  position: relative;
  padding-left: 40px; /* 数值 = SVG宽度 + 你想要的SVG和内容的间距 */
}

.oxy-target-div::before {
  /* 伪元素必填属性，缺省则不会渲染 */
  content: "";
  position: absolute;
  /* 定位到div的左前方，垂直居中，可根据需求调整偏移值 */
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  /* 替换为你的SVG实际尺寸 */
  width: 28px;
  height: 28px;
  /* 内联SVG，避免Oxy环境下的路径错误、跨域问题，替换为你自己的SVG代码即可，注意#色值前要加%23做URL转义 */
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23165DFF"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>') center/contain no-repeat;
}

常见问题排查：

• 伪元素不显示：检查是否漏写content: ""
• 位置乱跑：检查父div是否设置了position: relative，没有的话绝对定位会向上找最近的定位父级，偏移位置就会出错
• SVG颜色不显示：内联在CSS url里的SVG，色值的#要替换成%23，否则会被识别为URL锚点导致解析失败

• 方案2：Oxy可视化操作实现（零CSS基础友好，实时预览效果）
  不需要写代码，直接在编辑器里操作即可：
  1. 进入Oxygen编辑器，选中目标div
  2. 在div内部的最顶部，添加Oxy自带的SVG组件，上传你的SVG文件
  3. 选中刚添加的SVG，在右侧设置面板把定位改为「绝对定位」，直接拖动调整位置到箭头标注的对应位置，或者输入偏移数值精准调整
  4. 给父div添加对应方向的内边距，避免SVG遮挡div内的文本内容

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