:before and :after pseudo-elements exhibiting confusing behavior

Question

I'm implementing an ::after pseudo-element on an container div. The pseudo element sets a background-color, top 0, left 0, 100% width and height. Inside the div the height is set to 200px. This HTML/CSS combination results in the background-color covering the entire nested div that is enclosed and the added height and width specified.

However, if I remove ::after, the background-color is inserted, but under not on top of the nested div, which seems completely counter-intuitive. Why does using the ::after (or ::before) pseudo-element result in the content covering the nested div, while not using it results in the nested div going on top of the overlay? Shouldn't ::after mean it goes AFTER the content?

 .container1 {
    position:relative;
    height: 100%;
}

.overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background-color: hsla(211, 100%, 18%,.6);
  z-index: 2;
  width: 100%;
  height: 100%;
}

#hero {
   height: 200px;
   background: url(https://preview.ibb.co/nRxrBS/hero_truck_lg.jpg) no-repeat;
}

<div class="container1 overlay">
    <div id="hero"></div>
</div>

Before and after are pseudo-class selectors and should be preceded by doble colon `::before` and `::after` — jeprubio, Feb 17 '18 at 23:54
I know, it's just to inform you as in some browsers (IE) don't work as expected. It's better to use the standards — jeprubio, Feb 17 '18 at 23:56
so, do you want th background color to come after the image? I'm not following what you are trying to do here. — Keoki, Feb 18 '18 at 00:06
i'm just trying to understand why the :after and :before pseudo selectors are operating that way. if i wanted the background to come before or after the image, shouldn't using :before or :after accomplish that? why does using those still cover the image? — Dog, Feb 18 '18 at 00:08
problem is that you don't have anything in your div, for the background to come after or before. All you have is just an image background and a height. — Keoki, Feb 18 '18 at 00:12
adding content in the div doesn't seem to make a difference though — Dog, Feb 18 '18 at 00:15
What are you exactly, trying to achieve? Do you have an example, because right now your explanation is not clear. — Keoki, Feb 18 '18 at 00:17
@jeprubio: They are called pseudo-elements. *That* is why they have double colons. Pseudo-classes have single colons. And changing it to double colons is what makes them not work as expected in older versions of IE; leaving the single colons is what makes them work correctly, because older versions of IE adhere to - surprise surprise - older standards. I find it amusing that you know the double colons are there for a reason but still managed to get things completely mixed up anyway. I'm starting to think changing the standard to double colons for pseudo-elements was a mistake. — BoltClock, Feb 18 '18 at 05:51
Yes, sorry, pseudo-elements, I know the theory but I made a mess :) Thanks for the correction. But double colons work since IE9, so in my opinion it is better to use the standards as in some newer versions of IE sometimes single colons don't work as expected all the time. — jeprubio, Feb 18 '18 at 08:42

Ouroborus · Accepted Answer · 2018-02-18T00:27:56.643

2

You've got several items interfering with each other. But I think your main issue is this:

position:absolute; pulls elements out of the render order, causing them to render on top of static elements.

edited Feb 18 '18 at 00:27

answered Feb 18 '18 at 00:23

Ouroborus

16,237
4
39
62

1

but shouldn't position:absolute operate the same way not depending on whether or not a :before or :after pseudo selector is used? – Dog Feb 18 '18 at 00:24
1

i would have thought position absolute in this context would just mean position the overlay absolutely within the container div that's positioned relative. – Dog Feb 18 '18 at 00:25
Yes. And it does. That absolutely positioned pseudo element always ends up rendered on top of the statically positioned siblings. – Ouroborus Feb 18 '18 at 00:27
1

if i remove the :after pseudo selector, it is rendered underneath. i'm not sure that absolute positioning is the main factor. – Dog Feb 18 '18 at 00:29
1

If you remove `::after`, you're no longer appling the rule to a pseudo-element. In your example, removing `::after` changes the selector such that the rule acts on `.overlay`, a class on the parent `div`. – Ouroborus Feb 18 '18 at 00:31
@Dog: Change your ::after to a div after #hero and it'll behave exactly the same way. Absolute positioning is absolutely (pardon the pun) the main factor. – BoltClock Feb 18 '18 at 06:02
you mean like this?

– Dog Feb 18 '18 at 15:30
with overlay being the div after hero? that doesn't have the same effect. – Dog Feb 18 '18 at 15:30

:before and :after pseudo-elements exhibiting confusing behavior

1 Answers1