Stacking pseudo elements in CSS positioning

Hey there! I've been using before and after in my element and it's been working well, but now I'm facing a problem. When I try to set a background color for the section, the before and after elements disappear. I understand that this issue arises due to z-index: -1, and I know that child elements like before and after cannot be stacked above the parent element. So, what could be the solution here? I don't want to add any new elements just to solve this:


This is what I'm aiming for: https://i.sstatic.net/yvYhF.jpg 

section{
    height:400px;
    padding:50px 0;
    background-color:#00fb8f;
}
.box-shadow-1{
    height:200px;
    background-color:#e8e8e8;
    position:relative;
}
.box-shadow-1:before,
.box-shadow-1:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 25px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width: 300px;
  background-color:#ff0000;
  -moz-box-shadow: 0 20px 20px #777;
  -webkit-box-shadow: 0 20px 20px #777;
  box-shadow: 0 20px 20px #777;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
.box-shadow-1:after {
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section>
    <div class="container">
        <div class="row">
            <div class="col-lg-11 col-lg-offset-1">
                <div class="box-shadow-1">
                    Hey World
                </div>
            </div>
        </div>
    </div>
</section>

javascriptjqueryhtmlcss

Answer №1

To achieve the desired effect for box-shadow-1, make sure to assign a z-index value to its parent element, as shown below:

.col-lg-11.col-lg-offset-1 {
    position:relative;
    z-index: 0;
}

I have also made some adjustments to your pseudo elements in order to replicate the shadow featured in the provided image

Check out the Stack snippet for reference

section{
    height:400px;
    padding:30px 0;
    background-color:#e8e8e8;
}
.col-lg-11.col-lg-offset-1 {        /*  updated rule  */
    position:relative;
    z-index: 0;
}
.box-shadow-1{
    height:150px;
    background-color:#00fb8f;
    position:relative;
}
.box-shadow-1:before,
.box-shadow-1:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 25px;
  left: 10px;
  width: 50%;
  height: 20px;
  max-width: 300px;
  background-color:#ff0000;
  -moz-box-shadow: 0 30px 20px #777;
  -webkit-box-shadow: 0 30px 20px #777;
  box-shadow: 0 30px 20px #777;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
.box-shadow-1:after {
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section>
    <div class="container">
        <div class="row">
            <div class="col-lg-11 col-lg-offset-1">
                <div class="box-shadow-1">
                    Hello World
                </div>
            </div>
        </div>
    </div>
</section>

Answer №2

Could this be the solution you are seeking?

article{
    height:300px;
    padding:40px 0;
    background-color:#ffcc00;
}
.box-shadow-2{
    height:150px;
    position:relative;
}
.box-shadow-2 > div {
    background-color:#f9f9f9;
    height: 80%;
    position: relative;
    z-index: 10;
}
.box-shadow-2:before,
.box-shadow-2:after {
  z-index: 1;
  position: absolute;
  content: "";
  bottom: 20px;
  left: 15px;
  width: 45%;
  top: 70%;
  max-width: 250px;
  background-color:#4a90e2;
  -moz-box-shadow: 0 15px 15px #555;
  -webkit-box-shadow: 0 15px 15px #555;
  box-shadow: 0 15px 15px #555;
  -webkit-transform: rotate(-6deg);
  -moz-transform: rotate(-6deg);
  -o-transform: rotate(-6deg);
  -ms-transform: rotate(-6deg);
  transform: rotate(-6deg);
}
.box-shadow-2:after {
  -webkit-transform: rotate(6deg);
  -moz-transform: rotate(6deg);
  -o-transform: rotate(6deg);
  -ms-transform: rotate(6deg);
  transform: rotate(6deg);
  right: 15px;
  left: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<article>
    <div class="container">
        <div class="row">
            <div class="col-lg-10 col-lg-offset-2">
                <div class="box-shadow-2">
                    <div>Greetings Universe</div>
                </div>
            </div>
        </div>
    </div>
</article>

Answer №3

To achieve the desired effect, you can move the <section> to the back and bring the parent of .box-shadow1 forward by adding the following CSS:

section{
    height:400px;
    padding:50px 0;
    background-color:#00fb8f;
    z-index: -2;
}

.col-lg-11 {
  z-index: 1;
}

By applying these styles, you will obtain the desired result.

section{
    height:400px;
    padding:50px 0;
    background-color:#00fb8f;
    z-index: -2;
}

.col-lg-11 {
  z-index: 1;
}

.box-shadow-1{
    height:200px;
    background-color:#e8e8e8;
    position:relative;
}

.box-shadow-1:before,
.box-shadow-1:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 25px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width: 300px;
  background-color:#ff0000;
  -moz-box-shadow: 0 20px 20px #000;
  -webkit-box-shadow: 0 20px 20px #000;
  box-shadow: 0 20px 20px #777;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
}

.box-shadow-1:after {
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section>
    <div class="container">
        <div class="row">
            <div class="col-lg-11 col-lg-offset-1">
                <div class="box-shadow-1">
                    Hello World
                </div>
            </div>
        </div>
    </div>
</section>

Answer №4

Adjust the z-index property of the parent element containing the box-shadow-1 class.

section{
    height:400px;
    padding:50px 0;
    background-color:#00fb8f;
}
.box-shadow-1-parent {
  position: relative;
  z-index: 0; /* Adjust this value */
}
.box-shadow-1 {
    height:200px;
    background-color:#e8e8e8;
    position:relative;
}
.box-shadow-1:before,
.box-shadow-1:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 25px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width: 300px;
  background-color:#ff0000;
  -moz-box-shadow: 0 20px 20px #777;
  -webkit-box-shadow: 0 20px 20px #777;
  box-shadow: 0 20px 20px #777;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
.box-shadow-1:after {
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section>
    <div class="container">
        <div class="row">
            <div class="col-lg-11 col-lg-offset-1 box-shadow-1-parent">
                <div class="box-shadow-1">
                    Hello World
                </div>
            </div>
        </div>
    </div>
</section>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The issue with CSS height percentage failing to scale an image

I need help creating the top part of a website that will display a logo on the left and a navigation bar on the right. I have a large image for the logo as it may be used on an HDTV and needs to scale well. I tried putting the logo and nav bar in the same ...

css

Get Fit with Dynamic Programming

Currently delving into the realm of reactive programming using RxJS, I encountered the following exercise: Initialization of an empty array Upon application launch, a new Date() is added to the array Each mouse click appends a new value to the array alon ...

javascriptrxjsreactive-programmingreactive

What is the best way to change the content of a table cell by clicking on a link?

I am dealing with a table that has data in three columns. The first two columns contain just one or two words each, but the third column contains around 1000 characters. I want to be able to toggle the visibility of this third column's data when click ...

javascriptphpjqueryhtmlcss

Using the Jquery validation plugin to require a minimum of one item in a listbox

After an extensive search, I am still unable to find a solution for my issue. My problem involves a listbox (select multiple) of URI addresses that can be added through an input field located above it. The goal is to type in a URI address, click the ADD b ...

jqueryvalidation

Implementation of Django Registration Redux fails to recognize adjustments made to templates

For the past couple of weeks, I've been facing challenges with Django registration redux. Despite incorporating changes such as adding crispy forms and modifying buttons in accordance with the provided documentation, none of these updates reflect on m ...

pythondjangohtmltwitter-bootstrap-3django-registration

Is it possible to alter objects through the use of jQuery.map?

I'm working with a key-value pair that looks like this: var classes = { red: 'Red', green: 'Green' }; Is there a way to add a specific value before each key in the pair? Can jQuery.map help with this task? The desired end result ...

javascriptjquery

Transform form data into a specialized JSON structure

I have a form set up in the following way: <form id="myForm" ng-submit="submitForm()"> <select name="ItemName" ng-controller="ItemController"> <option value="" selected disabled>Select</option> <option ng-rep ...

javascriptc#angularjsjsonasp.net-mvc

Exploring the Power of Ajax Integration with Mongodb

I have been trying to figure this out for a while now, but I'm lost. I am attempting to use Ajax to retrieve information from a collection named 'reizen' in MongoDB. My goal is to cycle through all elements within the collection and extract ...

javascriptajaxmongodbmongoose

The ajax response is being deserialized prior to being parsed by the

In my API controller, I need to respond with a model that includes a decimal property. However, the response type is simply a string. I am aware that converting large decimal data to a JavaScript number may result in some data loss. Therefore, I am consi ...

javascriptjqueryjsonajax

Troubleshooting Issues with Bootstrap Carousel Functionality

I'm facing some difficulties with the Bootstrap carousel on my website. I have followed all the instructions carefully and researched for solutions, but unfortunately, my carousel is not functioning properly. It seems like everything is set up correct ...

jqueryhtmlcarousel

A guide on incorporating a customized Google map into your website

Recently, I utilized the Google Map editing service from this site: https://developers.google.com/maps/documentation/javascript/styling This link provided me with two things: 1. A JSON code 2. The Google API link However, I am unsure about how to incorpo ...

javascripthtmljsongoogle-mapsgoogle-maps-api-3

Creating divs of the same height with CSS styling

I am struggling with making 3 floating <div>s all the same length within a wrapper. The issue is that they need to be responsive and cannot have fixed heights. While researching on stackoverflow, I came across a post addressing this problem: Make fl ...

htmlcssheight

The compatibility issues with the textarea and text-indent: placeholder feature on EDGE are causing functionality problems

I'm facing a peculiar problem with placeholders when using the Edge browser. In my current project, I need to implement a textarea with a specific text-indent property. However, on Edge, the placeholder text appears displaced more than expected. To h ...

htmlcssmicrosoft-edge

What could be the reason that str_replace is failing to replace this particular string?

I am facing an issue with my PHP code that is intended to load data from a CSS file into a variable, find the old body background colour, replace it with a new colour submitted through a form, save the updated CSS file, and update the colour in a database. ...

phpmysqlcssstr-replace

Cease the use of bi-directional data binding on an Angular directive

One way I've been attempting to send information to a directive is through the following setup: <ui-message data="{{app}}"></ui-message> In my controller, this is how I define it: app.controller("testCtrl", function($scope) { $scope.a ...

javascriptangularjs

React final form does not support custom input values

Below is the code in question: ... return ( <FormItem key={name}> <Label htmlFor={id}>{camelCaseToTitleCase(fieldKey)}</Label> { fieldKey === 'homePhone' ? ...

javascriptreactjsreact-final-form

Conceal the bullet point in an unorganized list

I am currently attempting to customize the appearance of an unordered list that is being used for the navigation menu on a specific website. The website in question is: On this site, you will notice that there is a dot or disc between each menu item, disp ...

htmllistcss

Formatting a datetime string in Angular to display as yyyy-MM-dd HH:mm

I'm facing an issue with datetime formatting in angularJS. I'm trying to convert the datetime "1990-11-25 14:35:00" into the format 25/11/1990 14:35, without using a Date object in the controller. It seems like angular can only handle proper da ...

javascriptangularjsdatedatetime

How can I change it so that clicking on the YouTube icon directs me to www.google.com?

I have a YouTube icon on my website and I want it to redirect me to Google.com when clicked. However, it is not working as intended. I am trying to implement this functionality using JavaScript. HTML <div class="yt" > <i class=" ...

javascripthtmljquery

Adjusting background size using jQuery as the window is resized

Exploring ways to dynamically resize the background image of my website based on the current window dimensions using jQuery. At the moment, I have tried the following approach: $(window).resize(function() { $("body").css({"background ...

javascriptjqueryhtmlcssresize