如何将背景颜色置于文本下划线后面？

Question

我在background-color内的元素<mark>上应用<h2>时遇到了一个小问题。

当前状态：

应该如何：

标记

<h2>Wednesday, 06 of <mark>January</mark> 2016</h2>

最终，<mark>的背景应该位于<h2>的文字下划线之后。与z-index一起玩但不起作用。我假设<mark>位于<h2>内。

有人可以帮忙吗？

Answer 1

这是您更新的小提琴https://jsfiddle.net/4ajdwah9/2

更改z-index后工作。

h2 {
    border-bottom: 1px solid black;
}

mark {
    background: tomato;
    padding-bottom: 5px;
    position: relative;
    z-index: -1;
}

虽然这是一个快速解决问题的方法。使用z-index：-1之后，在某些情况下可能会隐藏。

Answer 2

使用伪元素覆盖一行：https://jsfiddle.net/4ajdwah9/3/

mark::before {
  content: " ";
  position: absolute;
  height: 1px;
  width: 100%;
  bottom: 3px;
  background: black;
}

为了更好地根据建议进行缩放，只需稍微更改一下：

mark::before {
  content: " ";
  position: absolute;
  height: 0px;
  border-bottom: 1px solid black;
  width: 100%;
  bottom: 3px;
  background: black;
}