Следуя решению, приведенному в этом посте. Как отобразить значок в меню. Я создал значок, содержимым которого является URL-адрес значка SVG. Родительский элемент отображается в виде встроенного блока с позицией: относительной.
Код: Выделить всё
.button::after {
content: url("path/to/SVG");
position:absolute;
top:4px;
right:0px;
display:inline-flex;
min-width:16px;
height:16px;
justify-content: center;
text-align:center;
color: white;
border:1px solid red;
border-radius:10px;
background: red
}
Без отображения: inline-flex и useify-content: center Все браузеры показывают значок (красный круг) в правильном положении, но значок находится за пределами значок. После добавления этих двух свойств Firefox показывает значок, идеально центрированный, в то время как Edge, Chrome и Safari больше не показывают значок. Я также попробовал также место для места: Центр без эффекта. Проверка элемента в инструментах разработчика показывает Flexbox в нужном месте на значке во всех браузерах.>
Подробнее здесь:
https://stackoverflow.com/questions/793 ... wser-types
Мобильная версия