html - 偏移 html 元素/标签后面的背景

Question

我想在任何 HTML 元素或标签后面设置一个 CSS 背景，它应该有一点偏移。

这是我正在寻找的结果:

您可以看到指向轻微背景的红色尖箭头，该背景在 <h2> 之前开始文本并在文本结束之前结束。此背景应随着元素中文本的数量而扩展。

我已经尝试使用框阴影来执行此操作，如下所示:

body {
  padding: 20px;
}
h2 {
  display: inline-block;
  box-shadow: -10px 10px 0 red;
}

<h2>Ain't No Mountain</h2>

但是如您所见，背景并没有出现在文本后面。

如果有人做过这种事，请告诉我:)

Answer 1

伪元素在这里是理想的:

body {
  padding: 20px;
}
h2 {
  display: inline-block;
  position: relative;
}
h2::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 5px;
  left: -5px;
  background: rgba(255, 0, 0, 0.25);
  z-index: -1;
}

<h2>Ain't No Mountain</h2>