Q:

How do I use pseudo-elements to display content after the main item?

I am trying to achieve the following look:

I want to place the heart on the top right of the price box.   And I've managed to create it but the placement of the heart is hardwired.  And if I change $89k to something bigger, the price box increases in width and the heart is misplaced.
Is there a way that :before or :after pseudo-element can know (or inherit) the width of the price box and place itself accordingly?
Or am I going about this in a wrong manner?

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>

A:

In this case you can just use right: 0; instead of using hardcoded pixels for left, since you always want the icon to be displayed in the right corner anyway. There is no need to know the exact width of the element.

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>

