使用CSS显示复制编辑标记

Question

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

有没有办法使用CSS显示“NOT”和红色箭头？

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

谢谢你的帮助。

Answer 1

您可以使用span标记上的::before和::after css伪类来执行此操作。

我在下面添加了一个简单的例子。

* {
    font-family: arial;
}

.fancyNot {
    position: relative;
    display: inline-block;
}

.fancyNot::before, .fancyNot::after {
    display: block;
    position: absolute;
    color: #f06559;
    font-weight: 700;
}

.fancyNot::before {
    content: "NOT";
    top: -1em;
    left: -1em;
    transform: rotate(-5deg);
}

.fancyNot::after {
    content: "^";
    bottom: -0.7em;
    left: -0.1em;
}

<p>Lunch will <span class='fancyNot'>&nbsp;</span> be served at</p>
<p>Silent Auscion will <span class='fancyNot'>&nbsp;</span> close at</p>
<p>Our Guest Speaker will <span class='fancyNot'>&nbsp;</span> speak at</p>