使用伪元素定位文本

Question

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

但是我需要定位方面的帮助。我希望使用 css pseudo elements 编写和定位“蜂蜜”部分。我读到这应该行得通 content: "honey \A money" 应该行不通。

所以澄清一下，我想要的是一种使用 ::before and/or ::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>

使用伪元素定位文本

Using pseudo elements to position text

css

pseudo-element