我使用CSS非常新,我正在尝试模仿展示海报的内容。基本上,我正在寻找一种在网页上添加复制编辑标记的方法。参见下图。
有没有一种使用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'> </span> be served at</p>
<p>Silent Auscion will <span class='fancyNot'> </span> close at</p>
<p>Our Guest Speaker will <span class='fancyNot'> </span> speak at</p>
关于html - 使用CSS显示副本编辑标记,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49053367/