Pseudo-Elemente Verwendung von Text zu positionieren

Question

So ist es das, was ich achive will:

Aber ich muß mit der Positionierung helfen. Ich möchte, dass der Teil "Honiggeld" mit css pseudo elements geschrieben und positioniert wird. Ich habe gelesen, dass dies funktionieren sollte content: "honey \A money" sollte funktionieren, es tut nichts.

Also nur um zu klären, was ich will ist eine Möglichkeit, diese Positionierung mit :: vor und/oder :: nach Tags zu erreichen. Danke!

Answer 1

Sie können dies mit Pseudo-Element tun, aber Sie müssen auch white-space: pre; hinzufügen.

.text { 
 
    position: relative; 
 
    display: inline-block; 
 
    font-size: 100px; 
 
    line-height: 0.8; 
 
} 
 
.text:after { 
 
    content: 'HONEY \A MONEY'; 
 
    white-space: pre; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    font-size: 40px; 
 
    line-height: 1; 
 
    transform: translateX(100%); 
 
}

<div class="text">O</div>