时间戳

首页 > 解决方案 > 如何使用 CSS 在某些文本下方获得突出显示

html - 如何使用 CSS 在某些文本下方获得突出显示

问题描述

我想创建一个 CSS 类，我可以将其附加到带有一些文本的跨度上，以创建如下所示的突出显示： 在此处输入图像描述

是否可以使其相对于跨度的字体大小？这样我就可以使用一个通用的类。可以使用 :after 之类的伪选择器或元素来完成吗？

非常感谢任何帮助，谢谢。

标签： htmlcsssass

解决方案

像这样的东西？

body
{
  white-space: pre;
  font-family: system-ui;
  font-weight: bold;
}

h1
{
  margin: 0;
}
.mark,
mark
{
  background-color: transparent;
  position: relative;
}
.mark:before,
mark:before
{
  content: "";
  width: 100%;
  height: 40%;
  background-color: #FAC86B;
  position: absolute;
  bottom: 0;
  left: 0.5em;
  mix-blend-mode: overlay;
}
<span class="mark">AI MARKETPLACE</span>
<h1 class="container">
<mark>AI MARKETPLACE</mark>
AI MARKETPLACE
test <mark>text</mark> blah
AI MARKETPLACE
<mark>test text blah</mark>
</h1>

推荐阅读