0

I built this snippet to highlight paragraphs on hover by using a pseudo element:

.wrapper {
  /* background: #ccc; */
}

p {
  position: relative;
  padding: 0.5em 1em;
  margin: 0em;
}

p:hover::after {
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  background: orange;
  content: '';
  z-index: -1;
  border-radius: 7px;
}
<div class="wrapper">
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
  <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem et ea rebum.</p>
  <p>takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>

As long as the wrapping div hasn't a background color applied, above code is working fine. But as soon as the wrapper gets a background color, the highlighting pseudo element is hidden. Adjusting z-index doesn't help.

.wrapper {
  background: #ccc;
}

p {
  position: relative;
  padding: 0.5em 1em;
  margin: 0em;
}

p:hover::after {
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  background: orange;
  content: '';
  z-index: -1;
  border-radius: 7px;
}
<div class="wrapper">
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
  <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem et ea rebum.</p>
  <p>takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
ludovico
  • 2,103
  • 1
  • 13
  • 32
Madamadam
  • 842
  • 2
  • 12
  • 24

1 Answers1

4

You need to add a another z-index to one of your classes, see the below for a working solution. Notice how I have added z-index:50; to the actual p tag.

.wrapper {
  background: #ccc;
}

p {
  position: relative;
  padding: 0.5em 1em;
  margin: 0em;
  z-index:50;
}

p:hover::after {
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  background: orange;
  content: '';
  z-index: -1;
  border-radius: 7px;
}
<div class="wrapper">
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
  <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem et ea rebum.</p>
  <p>takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>

JSFiddle

MattHamer5
  • 1,431
  • 11
  • 21
  • I thought that was the problem and was writting an answer with the same idea. But as I examined the problem, I saw that I'm not understanding this z-index thing correctly. Your values work. But if we put say z-index:1 for wrapper, z-index:2 for hover and z-index: 3 for p they don't. Why ? Take a look: https://jsfiddle.net/2gztaLe3/1/ – Nelson Teixeira Apr 23 '19 at 14:56
  • @NelsonTeixeira Yeah I found that, if the on hover `z-index` value is greater than -1 the background will cover the entire paragraph text (even if the actual p tag has a higher z value). I didn't understand why that was happening when I was playing around with the JSFiddle. – MattHamer5 Apr 23 '19 at 15:01
  • 1
    Answer for anyone else who may be wondering: https://stackoverflow.com/questions/3032856/is-it-possible-to-set-the-stacking-order-of-pseudo-elements-below-their-parent-e – MattHamer5 Apr 23 '19 at 15:22
  • Thanks @Matt.Hammer5, this is the explanation why fiddling with z-index didn't work. – Madamadam Apr 25 '19 at 09:18