使用伪元素来定位文本

Question

所以这是我想才达到：

但我需要与定位有帮助。我希望使用css pseudo elements来编写和定位“亲爱的钱”部分。我读到这应该工作content: "honey \A money"应该工作而不是什么都不做。

所以只是为了澄清，我想要的是一种使用:: before和/或:: after标签实现此定位的方法。谢谢！

Answer 1

你可以用伪元素做到这一点，但你也需要添加white-space: pre;。

.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>