What could be causing the ::before pseudo element to display on top of the element?

Question

What could be causing the ::before pseudo element to display on top of the element?

According to my understanding, the ::before pseudo-element should be positioned below the element, while the ::after pseudo-element should appear above it in terms of z-index.

In this particular scenario, I am attempting to darken just the background color (not the foreground color) when hovering over a button. Despite using ::before, it still displays in front. Why is that the case? I am aware that I could resolve this by adjusting the z-index, but as per this comment, which received 6 upvotes:

I think it's better to use :before so you get the right stacking order without playing with z-index.

I would expect not to have to do so, and the order should be correct from the outset?

.parent {
  --my-color: red;  
}
button {
    color: blue;
    background-color: var(--my-color);
    padding: 8px 16px;
    position: relative;
}
button:hover {    
    background-color: transparent;
}
button:hover::before {
    display: block;
    content: "";
    position: absolute;
    top: 0; left: 0; width: 50%; height: 100%; /* width is 50% for debugging (can see whats below) */
    background-color: var(--my-color);
    filter: brightness(80%);
}

<div class="parent">
    <button type="button">CLICK ME</button>
</div>

css z-index pseudo-element

Answer 1

Answer №1

When using ::before or ::after, there is no difference in terms of z-index or z-axis order. By default, both pseudo elements will appear in front of their parent element, covering it if their position is set accordingly. To layer the z-axis beyond this default behavior, a specific z-index must be utilized, along with a combination of relative and absolute positioning.

Additional information:

The code snippet below demonstrates two scenarios, one using ::before and the other using ::after, both without a defined z-index. In both cases, the pseudo element covers its parent element:

.parent {
  --my-color: red;
}

button {
  color: blue;
  background-color: var(--my-color);
  padding: 8px 16px;
  position: relative;
}

button:hover {
  background-color: transparent;
}

.parent:nth-child(1) button:hover::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--my-color);
  filter: brightness(80%);
}
.parent:nth-child(2) button:hover::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--my-color);
  filter: brightness(80%);
}

<div class="parent">
  <button type="button">CLICK ME</button>
</div>

<div class="parent">
  <button type="button">CLICK ME</button>
</div>

To address the question raised in a subsequent comment: Yes, a z-index is required to position the pseudo element behind the parent element.

The solution involves adding a negative z-index: -1; for the pseudo element, as shown in the modified code snippet below (either ::before or ::after can be used):

.parent {
  --my-color: red;
}

button {
  color: blue;
  background-color: var(--my-color);
  padding: 8px 16px;
  position: relative;
}

button:hover {
  background-color: transparent;
}

button:hover::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--my-color);
  filter: brightness(80%);
}

<div class="parent">
  <button type="button">CLICK ME</button>
</div>

Answer 2

When using ::before or ::after, there is no difference in terms of z-index or z-axis order. By default, both pseudo elements will appear in front of their parent element, covering it if their position is set accordingly. To layer the z-axis beyond this default behavior, a specific z-index must be utilized, along with a combination of relative and absolute positioning.

Additional information:

The code snippet below demonstrates two scenarios, one using ::before and the other using ::after, both without a defined z-index. In both cases, the pseudo element covers its parent element:

.parent {
  --my-color: red;
}

button {
  color: blue;
  background-color: var(--my-color);
  padding: 8px 16px;
  position: relative;
}

button:hover {
  background-color: transparent;
}

.parent:nth-child(1) button:hover::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--my-color);
  filter: brightness(80%);
}
.parent:nth-child(2) button:hover::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--my-color);
  filter: brightness(80%);
}

<div class="parent">
  <button type="button">CLICK ME</button>
</div>

<div class="parent">
  <button type="button">CLICK ME</button>
</div>

To address the question raised in a subsequent comment: Yes, a z-index is required to position the pseudo element behind the parent element.

The solution involves adding a negative z-index: -1; for the pseudo element, as shown in the modified code snippet below (either ::before or ::after can be used):

.parent {
  --my-color: red;
}

button {
  color: blue;
  background-color: var(--my-color);
  padding: 8px 16px;
  position: relative;
}

button:hover {
  background-color: transparent;
}

button:hover::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--my-color);
  filter: brightness(80%);
}

<div class="parent">
  <button type="button">CLICK ME</button>
</div>

Answer 3

Answer №2

One way to ensure that the pseudo element appears behind the parent element on hover is by adjusting the z-index values. Remove the z-index from the parent element (in this case, the button) and assign a z-index to the grandparent element (in this case, .parent). Additionally, apply a negative z-index to the pseudo element.

Here is the modified code:

.parent {
  --my-color: red;
  z-index: 1;
}
button {
  color: blue;
  background-color: var(--my-color);
  padding: 8px 16px;
  position: relative;
}
button:hover {
  background-color: transparent;
}
button:hover::before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: var(--my-color);
  filter: brightness(80%);
  z-index: -1;
}

<div class="parent">
  <button type="button">CLICK ME</button>
</div>

Answer 4

One way to ensure that the pseudo element appears behind the parent element on hover is by adjusting the z-index values. Remove the z-index from the parent element (in this case, the button) and assign a z-index to the grandparent element (in this case, .parent). Additionally, apply a negative z-index to the pseudo element.

Here is the modified code:

.parent {
  --my-color: red;
  z-index: 1;
}
button {
  color: blue;
  background-color: var(--my-color);
  padding: 8px 16px;
  position: relative;
}
button:hover {
  background-color: transparent;
}
button:hover::before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: var(--my-color);
  filter: brightness(80%);
  z-index: -1;
}

<div class="parent">
  <button type="button">CLICK ME</button>
</div>

What could be causing the ::before pseudo element to display on top of the element?

Answer №1

Answer №2

Similar questions

What are the steps to achieve form styling using Bootstrap?

Adjusting Font Size in Angular Material Design

Even though my form allows submission of invalid data, my validation process remains effective and accurate

I am having trouble with the spacing on my website, even after I have tried declaring it

Prevent Scrolling on Body with W3 CSS

I'm looking to customize my d3.js Bar Graph by changing the color of each bar individually and adding a Scale for them. How can I

Animating Jquery to smoothly change opacity until it reaches 100% visibility

What is the best way to display images one by one from a map using a random fade effect?

Label the image with unique div elements that will remain attached to the image

How can I choose an expandable element using Selenium?

Creating a Text Design with a Right Arrow Symbol using HTML and CSS

Add text to the forefront of video content while in fullscreen mode

Ways to expand the dimensions of a Popup while including text

I am utilizing the ternary operator within the map function to dynamically adjust the column width of a material table

Is there a way to create a glow effect in CSS that considers the background color?

Prevent hover animation in jQuery when the div is at the top of the page

Position the image in the center of the div both horizontally and vertically

What steps should I follow to make a dynamic carousel card with Bootstrap that adjusts to different screen sizes

Problem with user scalability in desktop browsers: when zooming out to 33% and lower, all CSS vanishes

I'm having trouble getting the "spacing" styling attribute to work in Material UI when I attempt to space out elements within my Box component. Can anyone explain why this might be happening?