使用伪元素定位文本

Question

所以这就是我想要实现的目标：

但我需要帮助定位。我想要＆＃34;蜂蜜钱＆＃34;要使用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>