Html 如何使用伪元素在主项之后显示内容？

我正在尝试实现以下外观：

我想把心放在价格框的右上角。我成功地创造了它，但心脏的位置是硬连线的。如果我把8.9万美元换成更大的东西，价格箱的宽度就会增加，心脏就放错地方了

有没有一种方法：before或：after伪元素可以知道或继承价格框的宽度并相应地放置它自己

还是我用了一种错误的方式

身体{ 背景色：浅色鲑鱼； 转换：scale3.0； 变换原点：0； } 1.房价{ 颜色：白色； 边框宽度：1px； 边框样式：实心； /*宽度：50px*/ 文本对齐：居中； 边界半径：2px； 字体系列：Helvetica，Arial； 字体大小：14px； 字体大小：300； 显示：内联块； 位置：相对位置； 左侧填充：5px； 右侧填充：5px； } /*喜爱的标记*/ 1.房价：之前{ 内容：♥; 颜色：红色； 显示：内联块； 位置：绝对位置； 左：39px； 顶部：-8px； 文本阴影：白色0px 0px 1px， 白色0px 0px 1px， 白色0px 0px 1px， 白色0px 0px 1px， 白色0px 0px 1px， 白色0px 0px 1px； } .家热{ 背景色：C81845； 边框颜色：F5F2F3； } 8900美元

---

在这种情况下，您可以使用right:0；不要在左侧使用硬编码像素，因为您始终希望图标显示在右角。不需要知道元素的确切宽度

身体{ 背景色：浅色鲑鱼； 转换：scale3.0； 变换原点：0； } 1.房价{ 颜色：白色； 边框宽度：1px； 边框样式：实心； /*宽度：50px*/ 文本对齐：居中； 边界半径：2px； 字体系列：Helvetica，Arial； 字体大小：14px； 字体大小：300； 显示：内联块； 位置：相对位置； 左侧填充：5px； 右侧填充：5px； } /*喜爱的标记*/ 1.房价：之前{ 内容：♥; 颜色：红色； 显示：内联块； 位置：绝对位置； 右：0px； 顶部：-8px； 文本阴影：白色0px 0px 1px， 白色0px 0px 1px， 白色0px 0px 1px， 白色0px 0px 1px， 白色0px 0px 1px， 白色0px 0px 1px； } .家热{ 背景色：C81845； 边框颜色：F5F2F3； } 80009K美元 8900美元 800099900美元

---

这就成功了！我希望我能投上一百万次票。@AngryHacker很乐意帮忙，只要一个分数作为答案就好了：我本来打算马上投，但这让你等了12分钟。啊，我不知道，谢谢@Makyen完成了。基本上忘记了。不过，我更喜欢使用CodePen，因为它将我的所有代码片段保存在一个地方。