Javascript CSS-相对于文本内联元素的相对/绝对位置

我有一个带有下拉标签的导航栏菜单。文本是动态填充的。我需要将插入符号图标定位在文本旁边的任意给定视口大小。这也是我指的（见绿色插入符号）

下面是代码

*{
框大小：边框框；
}
身体{
利润上限：70像素；
字体系列：Arial；
字体大小：30px；
}
.导航包装器{
宽度：100%；
背景颜色：粉红色；
高度：150像素；
显示器：flex；
}
.左填料{
//右边距：自动；
弹性：2；
背景颜色：棕色；
}
1.填空权{
背景色：黑色；
宽度：600px；
}
.菜单包装{
背景颜色：浅蓝色；
显示器：flex；
证明内容：柔性端；
}
.菜单btn{
文本对齐：居中；
背景颜色：橙色；
边框：1px纯红；
显示器：flex；
对齐项目：居中；
}
.文本{
边框：1px纯蓝色；
}
插入符号{
最小宽度：25px；
}

lo netrunner
沙拉面&伟大
公式与计算

您可以

• 应用

  显示：内联块

  和侧边填充到

  .text

  ，为

  .caret

  创建空间
• 应用

  位置：相对

  到

  菜单btn

  ，使其成为

  .caret

  元素的位置参考
• 将

  position:absolute

  应用于

  .caret

  ，为到右边框的距离添加

  right

  设置，并添加

  top:50%

  和

  transform:translateY（-50%）

  以正确定位

根据需要更改

右侧

，

填充

和-如果需要）

边距

设置

*{
框大小：边框框；
}
身体{
利润上限：70像素；
字体系列：Arial；
字体大小：30px；
}
.导航包装器{
宽度：100%；
背景颜色：粉红色；
高度：150像素；
显示器：flex；
}
.左填料{
//右边距：自动；
弹性：2；
背景颜色：棕色；
}
1.填空权{
背景色：黑色；
宽度：600px；
}
.菜单包装{
背景颜色：浅蓝色；
显示器：flex；
证明内容：柔性端；
}
.菜单btn{
文本对齐：居中；
背景颜色：橙色；
边框：1px纯红；
显示器：flex；
对齐项目：居中；
位置：相对位置；
}
.文本{
边框：1px纯蓝色；
显示：内联块；
填充：0.1em；
利润率：0.10px；
}
插入符号{
最小宽度：25px；
位置：绝对位置；
右：15px；
最高：50%；
转化：translateY（-50%）；
}

lo netrunner
沙拉面&伟大
公式与计算

将插入符号图像放入其相关的

span

元素中，并赋予

span

元素与上述父元素相同的弹性属性

*{
框大小：边框框；
}
身体{
利润上限：70像素；
字体系列：Arial；
字体大小：30px；
}
.导航包装器{
宽度：100%；
背景颜色：粉红色；
高度：150像素；
显示器：flex；
}
.左填料{
//右边距：自动；
弹性：2；
背景颜色：棕色；
}
1.填空权{
背景色：黑色；
宽度：600px；
}
.菜单包装{
背景颜色：浅蓝色；
显示器：flex；
证明内容：柔性端；
}
.菜单btn{
文本对齐：居中；
背景颜色：橙色；
边框：1px纯红；
显示器：flex；
对齐项目：居中；
}
.文本{
边框：1px纯蓝色；
显示：继承；
对齐项目：继承；
}
插入符号{
最小宽度：25px；
}

lo netrunner
沙拉面&伟大
公式与计算

尝试将插入符号放在span中。让我知道这是否有效

HTML:

公式与计算

<div class="menu-btn">
      <span class="text">Formulas & Computations</span>
      <span>
           <img class="caret" src="https://assets.codepen.io/867725/Icon_Caret.svg" />
      </span>
</div>