Содержимое Base64 в псевдоэлементе не отображается в Chrome

Я создал настраиваемый элемент флажка, используя псевдоэлемент :: before для метки, как и должно быть. Затем я понял, что на самом деле у него должна быть галочка в спецификации дизайна, и поэтому я добавил его в атрибут содержимого. Через постпроцессор он был закодирован как base64. Он очень хорошо работает в firefox - к сожалению, в chrome он вообще не отображается

Ожидаемый результат (скриншот из firefox):

Содержимое Base64 в псевдоэлементе не отображается в Chrome

Что получаем:

Содержимое Base64 в псевдоэлементе не отображается в Chrome

После небольшого возни кажется, что все дело в псевдоэлементе :: 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>

вы можете поделиться исходным SVG, который вы преобразовали в base64?

Temani Afif 25.10.2018 17:58

@TemaniAfif добавлен в редакцию

Michał Sadowski 25.10.2018 18:13

Вы можете добавить чек с помощью :before или :after, повернув его и просто раскрасив border.

SuperDJ 25.10.2018 19:12
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
3
509
1

Ответы 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-кодирование для упрощения редактирования)

Обновлено перо: https://codepen.io/Sphinxxxx/pen/YJddQq

Другие вопросы по теме