Skip to main content

Is this a CSS Bug: setting Background and z-index for Pseudo selectors(::before & :: after)

Recently I was making some UI for a friend's project. We had this CSS button effect that works elsewhere but failed to work at the desired location. Upon troubleshooting, we discovered that if the parent element has a background defined, you can't control the z-index of the pseudo selection of any of its children. Wait for it, I have got some demo.




TL;DR

set background colour or image for a "DIV.parent", create a "Div.child" inside the "DIV.parent". use CSS to modify the "::before"" element of the "Div.child" as follows; set position as absolute, content as an empty string, height:100% and width is best at 50% for example purposes, lastly, give it a background colour.
You will observe that the "::before"" element is overlaying the actual element's content. Try to adjust the z-index of the "::before"". You will also realize that the z-index works fine if we remove the background setting for "DIV.parent".



Let's run through some code.

we begin with our markup then we move to CSS styles.

Our goal is to have a DIV where the background colour is defined on the pseudo-element(::before). For this to happen, we must make the DIV's position relative, then we set an absolute position for the pseudo-element. The pseudo-element also needs to be 100% height and any width greater than zero is fine. The absolute position here will force our pseudo-element to overlay the text. This is why we need to set a "z-index". The issue now is that the z-index is not giving desired effects. This was traced to the fact that the "parent" container had a background property defined.

<body>

    <div class="parent">
        <h1 style="color: white;">One BG disturbs another</h1>
        
        <div class="child">
            Where is my ::before's BG
        </div>

        <div class="child reset-z-index">
            I'm here without Z-index
        </div>
    </div>

    <div class="child">
        BG is out the BOX
    </div>
    
</body>

Now to the CSS styles

        .parent{
            background: #8ba274;
        }

        .child{
            padding: 15px;
            display: inline-block;
            border: solid 1px rebeccapurple;
            position: relative;
            margin-top: 15px;
            margin-bottom: 15px;
            color: #19634a;
            font-weight: bolder;
        }

        .child::before{
            position: absolute;
            top: 0;
            left: 0;
            content: '';
            width: 100px;
            height: 100%;
            background-color: #f11;
            z-index: -1;
        }

        .reset-z-index::before{
            z-index: auto;
        }

Here in the style, we set the z-index as auto, to ensure that we can see what happens when the z-index is not set.


I am not sure what can be called a bug. I have only tried this on chrome browser (Version 92.0.4515.107 (Official Build) (64-bit)) so feel free to engage and let's see what happens at your own end when you test on all browsers. Perhaps you could find a better reason why this has to be so.

Cheers.

The resolution: if you have to use the pseudo-element for a similar function, ensure the parent container has no background property defined. Or better still, set your background property on the body tag.

Plot Twist: If you add background colour to the ".child" style, it becomes more messy and unusable.

This however has been solved and I am making a new article on how we got it solved.


Comments

Post a Comment

Popular Articles

Issue with installing python-axolotl or python-axolotl-curve25519 on Windows

It is peeve amazing how many hours get burnt while trying to resolve simple package dependency issues. I may be too dumb to proffer a lasting one-fits-all solution to all dependency issues, but I got this issue fixed in my own case. Problem Description: The python-axolotl library requires certain dependencies that are not properly managed when installing libraries via a command line's requirement.txt file. I got real help by reading through this link below, but this page might be more helpful when it comes to detailed instructions. Actual instructions: https://github.com/tgalal/python-axolotl Typical errors might look like the following: 1. In this case, missing library(s). Libraries needed for compiling some python resources. Unfortunately, http://aka.ms/vcpython27  has been decommissioned because Python2x is EOL. You can still get the VcPython27 from an archive at https://web.archive.org/web/20210106040222/download.microsoft.com/download/7/9/6/796EF2E4-801B-4F...
Post a Comment
Read more

Chrome Extension (part 1): Injecting External Scripts into a Web Page

Recently, I was required to develop a chrome extension for some executives. This plugin only targeted a few of our most visited websites. There was a lot of approaches to implement the extension and all our use cases. One particular challenge was trying to inject scripts from our own CDN into specific web pages. the scripts were required to interact with the page and all variables possible. Since there is a script isolation thing for Chrome Extensions, I felt this was a good challenge to take up in my spare time. Here is a sample of my content script. content.js document.onreadystatechange = function () { console.log("document state is:" + document.readyState); if (document.readyState == "complete") { let randAntiCache = Math.random().toString().split('.')[1]; let scriptURL4="http://localhost.test/testscript.js?v="+randAntiCache; let scriptnode4 = document.createElement("script"); scriptnode4.setAttribute("s...
Post a Comment
Read more

Who is this Brown Skin Girl?

In the recent wake of a great musical sensation and a re-make of the famous Lion King movie, Beyonce has been on the global selection of artistes to share performances. Today, I will try to examine the poetry of the track titled Brown Skin Girl, All interpretations in this article are my personal candid opinion. so feel free to share yours in the comments section, i will be glad to add it to my edits. So while I may not pretty boy; your heart is amiss; Play it like a villain `cause she caught in a wave This paints the picture of a guy who feels He is not good enough for the lady of his dreams, so he said Tonight I am walking away Lined up my mind, on the grind yeah yeah meaning he tryin' to give up. But then in the chorus, He said Tonight I might fall in love Depending on how you hold me I'm glad that I'm calming down can't let no one come control me So this dude aint feeling he's the kinda guy for bae, but bae be doubting if she still want...
Post a Comment
Read more