Добрый день. Возникла следующая проблема. Требовалось создать значок "плюс в кружке", где плюс находится точно в центре кружка. При этом сам плюс является after-псевдоэлементом для одного div-а.
Код псевдоэлемента:
content: '+';
display: flex;
position: absolute;
z-index: 5;
font-size: 35px;
font-weight: 400;
color: white;
background-color: #1ED4B3;
border: solid 1px #1ED4B3;
border-radius: 50%;
width: 45px;
height: 45px;
align-items: center !important;
flex-direction:column !important;
justify-content: space-evenly !important;
Всё работает нормально для десктопных версий, но на всех мобильных браузерах проблема в том, что знак плюса в кружке сдвинут кверху, а не находится по центру.
Пробовал уже использовать знак заглавного плюса U+FF0B , пробовал использовать justify-content: space-between , justify-content: space-around , justify-content: center , align-items: stretch .
Есть идеи, из-за чего такое может быть и как это можно исправить?
Более полный код (включая класс div-а , к которому привязан псевдоэлемент):
.div__after{
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
&::after{
content: '+';
display: flex;
position: absolute;
z-index: 5;
font-size: 35px;
font-weight: 400;
color: white;
background-color: #1ED4B3;
border: solid 1px #1ED4B3;
border-radius: 50%;
width: 45px;
height: 45px;
align-items: center !important;
flex-direction:column !important;
justify-content: space-evenly !important;
@media (--xs-viewport){
top: calc(100% - 10px);
}
@media (--md-viewport) {
top: 25%;
left: calc(100% - 10.5px);
}
@media (--lg-viewport) {
left: calc(100% - 7.5px);
}
}
}
Простой
