html - 如何将背景颜色放在文本下划线后面？

Question

我在申请 background-color 时遇到了一个小问题在元素上 <mark>在 <h2> 里面.

当前状态:

应该如何:

标记

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

最终，<mark>的背景应该在 <h2> 的文本下划线后面.玩弄 z-index但不起作用。我假设是因为 <mark>在里面<h2> .

有人能帮忙吗？

Answer 1

这是您更新的 fiddle 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 后在某些情况下可能会隐藏。