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

html - 使用CSS显示副本编辑标记-LMLPHP

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

我真的不确定从哪里开始,所以没有任何代码可显示。我一直在搜索该论坛和其他论坛,但没有结果。

谢谢你的帮助。

最佳答案

您可以在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>

关于html - 使用CSS显示副本编辑标记,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49053367/

10-12 13:03
查看更多