html - 伪元素中的 Base64 内容在 chrome 中不显示

Question

我使用标签的::before 伪元素创建了一个自定义复选框元素，这是应该的。然后我意识到设计规范实际上应该有一个复选标记，所以我将它添加到内容属性中。通过后处理器，它被编码为 base64。它在 firefox 上运行得很好——不幸的是，在 chrome 上它根本不显示

预期结果(来自 firefox 的屏幕截图):

我们得到的:

经过一些摆弄之后，似乎所有关于::before 伪元素显示为 flex(但这样我就可以正确定位它)。

您知道为什么它会这样工作吗？或者我该如何绕过它？

最小工作示例:https://codepen.io/anon/pen/zmyEpo?editors=1111

HTML:

<div class="checkbox">
  <input type="checkbox" name="" id="" class="checkbox__input">
  <label class="checkbox__label">Label</label>
</div>

CSS:

.checkbox__label {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.checkbox__label::before {
  content: '';
  width: .8em;
  height: .8em;
  border: 3px solid;
  margin-right: .5em;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .3em;
  border-radius: 50%;

  box-shadow: inset 0 0 0 2em #000;
  content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjRkZGIiBkPSJNMTczLjg5OCA0MzkuNDA0bC0xNjYuNC0xNjYuNGMtOS45OTctOS45OTctOS45OTctMjYuMjA2IDAtMzYuMjA0bDM2LjIwMy0zNi4yMDRjOS45OTctOS45OTggMjYuMjA3LTkuOTk4IDM2LjIwNCAwTDE5MiAzMTIuNjkgNDMyLjA5NSA3Mi41OTZjOS45OTctOS45OTcgMjYuMjA3LTkuOTk3IDM2LjIwNCAwbDM2LjIwMyAzNi4yMDRjOS45OTcgOS45OTcgOS45OTcgMjYuMjA2IDAgMzYuMjA0bC0yOTQuNCAyOTQuNDAxYy05Ljk5OCA5Ljk5Ny0yNi4yMDcgOS45OTctMzYuMjA0LS4wMDF6Ii8+PC9zdmc+);
}

.checkbox__input {
  display: none;
}

编辑:SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#FFF" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"/></svg>

Answer 1

如果您将 width 和 height 添加到您的 SVG，它会起作用:

content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 -50 512 512'%3E %3Cpath fill='%23FFF' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3E %3C/svg%3E");

(从 Base64 编码更改为 URL-encoding 以便于编辑)

更新笔:https://codepen.io/Sphinxxxx/pen/YJddQq