Question

我使用:: before伪元素创建了一个自定义复选框元素，它应该是标签。然后我意识到它实际上应该在设计规范中带有一个复选标记，因此我将其添加到content属性。通过后处理器，它被编码为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

chrome中不会显示伪元素中的Base64内容

1 个答案: