Question

在下面的代码中，我想要做的是边框应该留在文本的背面。所以文本需要与边界重叠。

唯一的问题是，我不允许添加任何额外的html元素，如跨度或其他任何内容，因为H1标签是由没有任何html标签知识的用户添加的。

＆＃13;

h1{
  position:relative; display:inline-block;
  z-index:10;
}
h1::after{
  content:""; display:block;
  position:absolute; left:0px; bottom:5px;
  height:10px; width:100%; background-color:yellow;
  z-index:0;
}

＆＃13;

<h1>This is the Title</h1>

＆＃13;

Answer 1

在边框上使用z-index:-1（：在之后），你很高兴

＆＃13;

h1{
  position:relative; display:inline-block;
  z-index:10;
}
h1::after{
  content:""; display:block;
  position:absolute; left:0px; bottom:5px;
  height:10px; width:100%; background-color:yellow;
  z-index:-1;
}

＆＃13;

<h1>This is the Title</h1>

＆＃13;

Answer 2

使用z-index: -1;

＆＃13;

h1{
  position:relative; display:inline-block;
  z-index:10;
}
h1::after{
  content:""; 
  display:block;
  height:10px; 
  position: absolute;
  bottom: 5px;
  width:100%; 
  background-color:yellow;
  z-index:-1;
}

＆＃13;

<h1>This is the Title</h1>

＆＃13;

Answer 3

使用z-index：-1; ＆安培;你会完成的。

在边框上重叠文本而不使用任何额外元素

3 个答案: