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

Question

我正在努力实现以下目标：

我想把心放在价格框的右上角。而且我已经成功创造了它，但心脏的位置是硬连线的。如果我将$ 89k改为更大的东西，那么价格框的宽度会增加而心脏就会错位。

有:before或:after伪元素可以知道（或继承）价格框的宽度并相应地放置自己的方式吗？

或者我是以错误的方式解决这个问题？

body {
  background-color: lightsalmon;
  transform: scale(3.0);
  transform-origin: 0 0;
}

.home-price {
  color: white;
  border-width: 1px;
  border-style: solid;
  /* width: 50px; */
  text-align: center;
  border-radius: 2px;
  font-family: Helvetica, Arial;
  font-size: 14px;
  font-weight: 300;
  display: inline-block;
  position: relative;
  padding-left: 5px;
  padding-right: 5px;
}

/* Favorite Marker */
.home-price:before {
  content: "♥";
  color: red;
  display: inline-block;
  position: absolute;
  left: 39px;      
  top: -8px;
  text-shadow:  white 0px 0px 1px,   
    white 0px 0px 1px,   
    white 0px 0px 1px,
    white 0px 0px 1px,   
    white 0px 0px 1px,   
    white 0px 0px 1px;
}

.home-hot {
  background-color: #C81845;
  border-color: #F5F2F3;
}

  <div style="height: 25px;margin-top: 30px;">
    <div class="home-price home-hot">      
      $89K
    </div>
  </div>
</div>

Answer 1

在这种情况下，您可以使用right: 0;代替left使用硬编码像素，因为您始终希望图标显示在右上角。无需知道元素的确切宽度。

body {
  background-color: lightsalmon;
  transform: scale(3.0);
  transform-origin: 0 0;
}

.home-price {
  color: white;
  border-width: 1px;
  border-style: solid;
  /* width: 50px; */
  text-align: center;
  border-radius: 2px;
  font-family: Helvetica, Arial;
  font-size: 14px;
  font-weight: 300;
  display: inline-block;
  position: relative;
  padding-left: 5px;
  padding-right: 5px;
}

/* Favorite Marker */
.home-price:before {
  content: "♥";
  color: red;
  display: inline-block;
  position: absolute;
  right: 0px;      
  top: -8px;
  text-shadow:  white 0px 0px 1px,   
    white 0px 0px 1px,   
    white 0px 0px 1px,
    white 0px 0px 1px,   
    white 0px 0px 1px,   
    white 0px 0px 1px;
}

.home-hot {
  background-color: #C81845;
  border-color: #F5F2F3;
}

<div class="home-price home-hot">      
  $80009K
</div>
<div class="home-price home-hot">      
  $89K
</div>
<div class="home-price home-hot">      
  $80009,99K
</div>