CSS ::after实现按钮通知覆盖层遇阻，求解决方案

问题根源分析 #

1. 裁剪导致通知隐藏：按钮#user-btn-1设置的clip-path: inset(0px -5px -5px -5px)会裁剪超出按钮范围的内容，而挂载在#favorites-btn-text上的伪元素通知刚好超出了按钮区域，因此被隐藏。
2. 层级不足：未设置z-index，无法保证通知在所有页面元素上方显示。
3. 伪元素挂载目标不合理：#favorites-btn-text未设置相对定位，虽会继承父级#user-btn-1的定位上下文，但挂载在子元素上会增加定位调整的复杂度。

修正方案一：调整伪元素挂载目标与样式 #

直接将伪元素挂载到已设置position: relative的按钮上，同时移除裁剪属性、添加层级控制：

.user-container {
  display: flex;
  flex-flow: column;
  width: 300px;
  float: left;
}

.user-welcome-message-container {
  border-bottom: solid 2px #ffe398;
  display: flex;
  float: right;
  text-align: right;
  padding-top: 15px;
  justify-content: flex-end;
}

.user-action-btns-container {
  display: flex;
  justify-content: flex-end;
}

#user-btn-1:hover {
  cursor: pointer;
  background-color: #c6e5ff;
  border-top: solid 0px;
  border-left: solid 1px #5babff;
  border-bottom: solid 1px #5babff;
  border-right: solid 1px #5babff;
  box-sizing: border-box;
  transition: 0.2s;
}

#user-btn-1 {
  font-family: sans-serif;
  font-style: normal;
  position: relative;
  width: 110px;
  font-size: 0.8em;
  color: black;
  background-color: #fff3d3;
  padding: 7px;
  margin-right: 15px;
  text-align: center;
  box-sizing: border-box;
  border-top: solid 0px;
  border-left: solid 1px #e8cb2a;
  border-bottom: solid 1px #e8cb2a;
  border-right: solid 1px #e8cb2a;
  border-radius: 0px 0px 5px 5px;
  box-shadow: 0px 0px 5px rgb(0 0 0 / 20%);
  /* 移除裁剪属性，避免通知被隐藏 */
  /* clip-path: inset(0px -5px -5px -5px); */
  transition: 0.2s;
}

/* 将伪元素挂载到按钮上，利用按钮的相对定位上下文 */
#user-btn-1::after {
  content: "7";
  position: absolute;
  /* 调整到按钮右上角，可根据需求修改坐标 */
  top: -8px;
  right: -8px;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background-color: #a4dbff;
  /* 设置高z-index确保在所有元素上方 */
  z-index: 999;
  font-size: 0.7em;
}

HTML无需修改，保持原结构即可。

修正方案二：使用独立通知元素（更灵活） #

如果伪元素的限制较多，可直接在按钮内新增一个独立的通知元素：

修改后的HTML

<div class="user-container">
  <div class="user-welcome-message-container">
  </div>
  <div class="user-action-btns-container">
    <div id="user-btn-1" title="Favorites">
      <i aria-hidden="true" class="fa-solid fa-bookmark" title="Your favorites"> 
        <span id="favorites-btn-text">Favorites</span>
        <!-- 新增通知徽章 -->
        <span class="notification-badge">7</span>
      </i>
    </div>
  </div>
</div>

新增的CSS

.notification-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #a4dbff;
  font-size: 0.7em;
  z-index: 999;
}

/* 同样移除按钮的裁剪属性 */
#user-btn-1 {
  /* clip-path: inset(0px -5px -5px -5px); */
  position: relative;
  /* 其他原有样式保留 */
}

补充说明 #

• 如果必须保留clip-path，可调整参数为inset(-10px -10px -10px -10px)，允许元素超出按钮范围，但可能影响按钮的视觉效果，需自行权衡。
• z-index的值可根据页面其他元素的层级调整，只要确保比其他元素的z-index更高即可。

内容的提问来源于stack exchange，提问作者NFSBuff