CODEWITHSUNDEEP
htmlcss
Sam Jefferies
Sam Jefferies

Reputation: 594

Why is my header not showing?

My <h3> tag isn't appearing, despite being colored in white, yet my h4 tag shows without any issue. How come?

.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%;
}
<div class="progress">
  <h3 style="color: white;">Why am I not appearing?</h3>
  <h4>Subtitle</h4>
</div>

JS Fiddle: https://jsfiddle.net/t58vhtwr/ (working solution)

Upvotes: 3

Views: 1373

Answers (4)

satya
satya

Reputation: 1185

Please try this:

.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>

Upvotes: 0

Qwertiy
Qwertiy

Reputation: 21400

.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>

Upvotes: -1

Qwertiy
Qwertiy

Reputation: 21400

You do not need absolute positioning.

.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;
}
<div class="progress">
  <h3>Why am I not appearing?</h3>
  <h4>Subtitle</h4>
</div>

Upvotes: -1

Quentin
Quentin

Reputation: 943556

Since the colour is white, it will show up clearly against a black background.

The black psuedo-element you have positioned, however, is covering the white text.

In order to see it, you'll need to make the heading render above the black pseudo-element.

For example:

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

Upvotes: 3

Related Questions