Question

我的.progress { width:250px; height:300px; border:1px solid black; border-radius: 3px; position:relative; background-color: lightblue; padding: 0 10px 0 10px; } .progress:after { content:'\A'; position:absolute; background:#232323; top:0; bottom:0; left:0; width:100%; height: 20%; }标签没有出现，尽管是白色的，但我的h4标签显示没有任何问题。怎么样？

<div class="progress">
  <h3 style="color: white;">Why am I not appearing?</h3>
  <h4>Subtitle</h4>
</div>

{{1}}

JS小提琴：https://jsfiddle.net/t58vhtwr/（工作解决方案）

Answer 1

由于颜色为白色，因此会在黑色背景下清晰显示。

然而，您定位的黑色伪元素覆盖白色文字。

为了看到它，你需要使标题呈现上面黑色伪元素。

例如：

.progress h2 { position: absolute; z-index: 5; }

Answer 2

请试试这个：

.progress h3{position:relative;z-index: 1}

.progress {
  width:250px;
  height:300px;
  border:1px solid black;
  border-radius: 3px;
  position:relative;
  background-color: lightblue;
  padding: 0 10px 0 10px;
}

.progress:after {
  content:'\A';
  position:absolute;
  background:#232323;
  top:0; bottom:0;
  left:0; 
  width:100%;
  height: 20%;
}

.progress h3 {
  position:relative;
  z-index: 1;
}

<div class="progress">
  <h3 style="color: white;">Why am I not appearing?</h3>
  <h4>Subtitle</h4>
</div>

Answer 3

您不需要绝对定位。

＆＃13;

.progress {
  width: 250px;
  height: 300px;
  border: 1px solid black;
  border-radius: 3px;
  background-color: lightblue;
  padding: 0 10px;
}

.progress h3 {
  background: #232323;
  color: white;
  margin: 0 -10px; 
  border: solid transparent;
  border-width: 1em 10px;
}

.progress h3 + h4 {
  margin-top: .5em;
}

＆＃13;

<div class="progress">
  <h3>Why am I not appearing?</h3>
  <h4>Subtitle</h4>
</div>

＆＃13;

Answer 4

.progress {
  width: 250px;
  height: 300px;
  border: 1px solid black;
  border-radius: 3px;
  position: relative;
  background-color: lightblue;
  padding: 0 10px 0 10px;
  z-index: 0; /* Create stacking context */
}

.progress:after {
  content: '';
  position: absolute;
  background: #232323;
  top: 0;
  bottom: 0;
  left: 0; 
  right: 0;
  height: 20%;
  z-index: -1; /* Send to back */
}

<div class="progress">
  <h3 style="color: white;">Why am I not appearing?</h3>
  <h4>Subtitle</h4>
</div>

为什么我的标题没有显示？

4 个答案: