Html 使用CSS显示副本编辑标记

我刚刚使用CSS，我正在尝试模仿展示海报的内容。基本上，我正在寻找一种在网页上添加复制编辑标记的方法。见下图

有没有一种使用CSS显示“NOT”和红色箭头的方法

我真的不知道从哪里开始，所以我没有任何代码显示。我一直在搜索这个论坛和其他论坛，但没有结果

---

感谢您的帮助。

您可以使用span标记上的

：：before

和

：：after

css伪类来完成此操作

我在下面添加了一个快速示例

*{
字体系列：arial；
}
范奇诺先生{
位置：相对位置；
显示：内联块；
}
.fancyNot:：之前，.fancyNot:：之后{
显示：块；
位置：绝对位置；
颜色：#f06559；
字号：700；
}
范奇诺：以前{
内容：“不”；
顶部：-1米；
左：-1米；
变换：旋转（-5度）；
}
范奇诺：之后{
内容：“^”；
底部：-0.7em；
左：-0.1米；
}

午餐将在

无声的奥西翁将在

---

我们的嘉宾演讲者将在

上发言。有几种方法可以做到这一点，但其中一种方法是将NOT和arrow设置为图像，然后将某些单词按跨距包装，并使用

相应地放置图像：在

之后，希望您至少尝试为自己编写代码。堆栈溢出不是代码编写服务。我建议你做一些，或者通过谷歌，或者通过搜索，尝试一下。如果仍然有问题，请返回代码并解释您尝试了什么。哦，这不是一个论坛。@HunterTurner是对的。将这些单词包装成一些跨距，然后使用一些：before和：after元素。也许你可以使用popper.js和一些css