CSS伪元素通知气泡的精确定位与动态内容管理

#user-btn-1 {
  /* ... 其他样式 ... */
  position: relative; /* 确保父元素具有相对定位 */
  /* ... 其他样式 ... */
}

#user-btn-1::after {
  position: absolute;
  /* ... 其他定位和样式 ... */
}

#user-btn-1::after {
  /* ... */
  top: 0;   /* 锚定到父元素顶部 */
  right: 0; /* 锚定到父元素右侧 */
  /* ... */
}

#user-btn-1::after {
  /* ... */
  top: 0;
  right: 0;
  transform: translate(50%, -5px); /* 精确偏移 */
  /* ... */
}

<div id="user-btn-1" title="Favorites" data-notification-count="14">
  <i aria-hidden="true" class="fa-solid fa-bookmark" title="Your favorites">
    <span id="favorites-btn-text">Favorites</span>
  </i>
</div>

#user-btn-1::after {
  content: attr(data-notification-count); /* 从数据属性获取内容 */
  /* ... 其他样式 ... */
}

/* 容器样式，与通知气泡定位无关，但保持上下文 */
.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;
  /* 考虑使用 column-gap 控制按钮间距，例如: column-gap: 15px; */
}

/* 按钮基础样式 */
#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: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::after {
  content: attr(data-notification-count); /* 动态获取通知数字 */
  position: absolute; /* 关键：脱离文档流进行绝对定位 */
  top: 0;             /* 锚定到父元素顶部 */
  right: 0;           /* 锚定到父元素右侧 */
  border-radius: 10px;/* 圆角 */
  padding: 4px;       /* 内边距 */
  background-color: #a4dbff; /* 背景色 */
  color: #fff;        /* 文字颜色，示例中未给出，可自行添加 */
  font-size: 0.7em;   /* 字体大小，可根据需要调整 */
  min-width: 18px;    /* 确保单数字也有足够宽度 */
  text-align: center; /* 文字居中 */
  line-height: 1;     /* 调整行高使文字垂直居中 */
  transform: translate(50%, -5px); /* 关键：向右偏移自身宽度一半，向上偏移5px */
  z-index: 1;         /* 确保在其他内容之上，若有必要 */
}

<div class="user-container">
  <div class="user-welcome-message-container">
  </div>
  <div class="user-action-btns-container">
    <div id="user-btn-1" title="Favorites" data-notification-count="14">
      <i aria-hidden="true" class="fa-solid fa-bookmark" title="Your favorites">
        <span id="favorites-btn-text">Favorites</span>
      </i>
    </div>
    <!-- 可以添加其他按钮，并使用 column-gap 控制间距 -->
  </div>
</div>