Если background в псевдоэлементе не отображает svg элемент, то причиной может быть несколько факторов:
1. Неправильное указание пути к файлу SVG:
- Убедитесь, что путь к файлу SVG указан правильно в свойстве background.
- Проверьте, содержит ли путь к файлу SVG правильное расширение (.svg) и находится ли файл на доступном для браузера месте.
2. Отсутствие указания размеров:
- Убедитесь, что вы указали корректные размеры для псевдоэлемента, используя свойства width и height или используя другие свойства, такие как padding или margin.
- SVG может не отображаться, если не заданы размеры псевдоэлемента или заданы некорректно.
3. Псевдоэлемент с display: inline:
- Если для псевдоэлемента указано значение display: inline, то SVG элемент может быть обработан как строчный элемент, и его размер может быть некорректно определен. Рекомендуется задавать display: block или display: inline-block.
4. Отсутствие фона в SVG элементе:
- Если у SVG элемента нет заданного фона, то его содержимое может быть невидимым. Убедитесь, что SVG файл содержит необходимые элементы или фон для корректного отображения.
5. Позиционирование и наложение элементов:
- Проверьте, что псевдоэлемент имеет правильное позиционирование и не перекрывается другими элементами на странице.
- Убедитесь, что нет других элементов или стилей, которые могут вызывать конфликты в отображении SVG элемента.
Если после проверки всех вышеперечисленных факторов SVG элемент все равно не отображается, рекомендуется использовать инструменты разработчика браузера для дальнейшего анализа и отладки проблемы.