与 ::after 内容重叠的菜单项文本答案

【问题标题】：Menu Item text overlapping with ::after content与 ::after 内容重叠的菜单项文本
【发布时间】：2022-08-17 23:27:02
【问题描述】：

所以我有一个菜单项列表，项目的文本与我在 ::after 伪元素的内容中绘制的圆圈重叠，我是 CSS 新手。

    \'&\' : {

    \'::after\' : {
        \'content\': `\'\'`,
        \'position\': \'absolute\',
        \'border-radius\': \'100%\',
        \'height\': \'21px\',
        \'width\': \'21px\',
        \'display\': \'block\',
        \'border-style\': \'dotted\',
        \'border-width\': \'2px\',
        \'right\': \'35px\',
        \'opacity\': 0.60,
    },

    \':hover\' : {
        \'background-color\': \'rgba(255, 0, 0, 0.8)\',
    },

    \'&.Mui-selected\' : {
        \'::after\' : {
            \'content\': `\'✓\'`,
            \'font-size\': \'16px\',
            \'text-align\': \'center\',
            \'line-height\': \'18px\',
            \'border-style\': \'solid\',
            \'opacity\': 1,
            \'color\': \'rgb(48, 155, 145)\',
        }
    }
}

欢迎来到堆栈溢出！遗憾的是，您的问题不符合社区准则。请使用tour，访问how do I ask a good question，并将其设为minimal, reproducible example。

标签： css

【解决方案1】：

所以不确定你的 HTML 是怎样的，因为它不在那里，但这里有一个菜单项，其中活动项有一个不重叠的 after 元素。

ul {
display: flex;
list-style: none;
}

ul li {
padding-left: 15px;
padding-right: 15px;
position: relative;
}

li.active::after {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
background-color: red;
}

<ul>
<li class="active">Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
<li>Menu Item 5</li>
</ul>

【讨论】：