在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>