html - 使用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>