html - 嵌入跨度和伪元素的问题:之后

Question

我正在尝试添加带有伪元素:after的下划线来注释一些文本。

我的问题是，我想强调下划线。在此示例中，这是短语“实际上确实可以...”和“ ...不起作用”。

.test {
  margin-top: 60px;
}

span.annotation {
  position: relative !important;
  display: inline-block !important;
}

span.annotation:hover {
  cursor: pointer;
  box-shadow: none;
}

span.annotation:after {
  content: '';
  position: absolute;
  left: -.15em;
  width: calc(100% + .5em);
  transition: all .2s;
  height: 3px;
}

span.annotation.firstLevel:after {
  z-index: -3;
  bottom: -0.5em;
}

span.annotation.secondLevel:after {
  z-index: -2;
  bottom: -0.2em;
}

span.annotation.thirdLevel:after {
  z-index: -1;
  bottom: 0.1em;
}

span.annotation:hover:after {
  width: calc(100% + 1em);
  content: attr(title);
  text-align: center;
  font-size: 8px;
  color: #444;
}

span.annotation.firstLevel:hover:after {
  height: calc(100% + 2.3em) !important;
}

span.annotation.secondLevel:hover:after {
  height: calc(100% + 1.9em) !important;
}

span.annotation.thirdLevel:hover:after {
  height: calc(100% + 1.6em) !important;
}

span.additionalType:after {
  background: gold;
}

span.annotation.testA:after {
  background: gainsboro;
}

span.annotation.testB:after {
  background: deepskyblue;
}

span.annotation.testX:after {
  background: gold;
}

span.annotation.testC:after {
  background: deeppink;
}

span.annotation.testD:after {
  background: tomato;
}

span.annotation.testE:after {
  background: greenyellow;
}

<div class="test">
  This is <span title="TestA" class="annotation testA firstLevel"><span title="TestB" class="annotation testB secondLevel"><span title="TestC" class="annotation testC thirdLevel">pretty good example</span> for the</span> <span title="TestD" class="annotation testD secondLevel">Text Annotation</span>  but <span title="TestX" class="annotation testX thirdLevel">actually <span title="TestE" class="annotation secondLevel testE">it</span> do not work</span></span>
</div>

（fiddle）

Answer 1

这似乎是一个堆栈上下文问题。将z-index:0添加到注释元素以隔离每个元素的上下文，并避免让所有:after属于同一堆叠上下文。

.test {
  margin-top: 60px;
}

span.annotation {
  position: relative !important;
  display: inline-block !important;
  z-index:0;
}

span.annotation:hover {
  cursor: pointer;
  box-shadow: none;
}

span.annotation:after {
  content: '';
  position: absolute;
  left: -.15em;
  width: calc(100% + .5em);
  transition: all .2s;
  height: 3px;
}

span.annotation.firstLevel:after {
  z-index: -3;
  bottom: -0.5em;
}

span.annotation.secondLevel:after {
  z-index: -2;
  bottom: -0.2em;
}

span.annotation.thirdLevel:after {
  z-index: -1;
  bottom: 0.1em;
}

span.annotation:hover:after {
  width: calc(100% + 1em);
  content: attr(title);
  text-align: center;
  font-size: 8px;
  color: #444;
}

span.annotation.firstLevel:hover:after {
  height: calc(100% + 2.3em) !important;
}

span.annotation.secondLevel:hover:after {
  height: calc(100% + 1.9em) !important;
}

span.annotation.thirdLevel:hover:after {
  height: calc(100% + 1.6em) !important;
}

span.additionalType:after {
  background: gold;
}

span.annotation.testA:after {
  background: gainsboro;
}

span.annotation.testB:after {
  background: deepskyblue;
}

span.annotation.testX:after {
  background: gold;
}

span.annotation.testC:after {
  background: deeppink;
}

span.annotation.testD:after {
  background: tomato;
}

span.annotation.testE:after {
  background: greenyellow;
}

<div class="test">
  This is <span title="TestA" class="annotation testA firstLevel"><span title="TestB" class="annotation testB secondLevel"><span title="TestC" class="annotation testC thirdLevel">pretty good example</span> for the</span> <span title="TestD" class="annotation testD secondLevel">Text Annotation</span>  but <span title="TestX" class="annotation testX thirdLevel">actually <span title="TestE" class="annotation secondLevel testE">it</span> do not work</span>
  </span>
</div>