Bootstrap5.2 RTL版本中锚点悬停时span从左到右扩展宽度问题

当前代码在Bootstrap 5.2 RTL环境下，span宽度变化时会向左侧扩展，不符合从左到右的需求。问题根源是RTL布局的方向特性，加上span使用right定位，导致宽度增长方向反向。

修改后的CSS代码 #

.login {
  background-color: #aaaaaa;
  padding: 10px 15px;
  border-radius: 10px;
  position: relative;
  margin-left: 5px;
  direction: ltr;

  i {
    color: white;
  }

  .my-badge {
    text-align: center;
    position: absolute;
    background-color: #FF5959;
    height: 12px;
    width: 12px;
    color: transparent;
    border: 2px solid #fff;
    border-radius: 5px;
    top: -2px;
    left: -4px;
    font-size: 8px;
    line-height: 16px;
    transition: width linear .3s, height linear .3s, color linear .3s;
    direction: ltr;
    overflow: hidden;
  }

  &:hover .my-badge {
    height: 20px;
    width: 60px;
    color: white;
    line-height: 16px;
  }
}

关键修改点 #

• 将.my-badge的right: -4px改为left: -4px：锚定span的左边缘，宽度增加时向右扩展，实现从左到右的动画效果。
• 添加overflow: hidden：避免初始小尺寸状态下文本溢出圆形范围。
• 补全过渡属性：让高度、颜色的变化也平滑过渡，提升交互体验。
• 调整line-height：确保文本在不同高度下保持垂直居中。

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