Wie verwende ich Pseudo-Elemente, um Inhalt nach dem Hauptartikel anzuzeigen?

Question

Ich versuche, das folgende Aussehen zu erreichen:

Ich möchte legen Sie das Herz auf der rechten oberen Ecke des Preisfeldes. Und ich habe es geschafft, es zu erstellen, aber die Platzierung des Herzens ist fest verdrahtet. Und wenn ich $ 89k zu etwas Größerem ändere, vergrößert sich die Preisbox und das Herz ist verlegt.

Gibt es eine Möglichkeit, dass :before oder :after Pseudo-Element die Breite der Preisbox kennen und/oder sich entsprechend platzieren kann?

Oder mache ich das falsch?

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

In diesem Fall können Sie nur right: 0; verwenden, anstatt für left fest codierte Pixel, da Sie immer das Symbol wollen ohnehin in der rechten Ecke angezeigt werden. Es ist nicht notwendig, die genaue Breite des Elements zu kennen.

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>