Home/ Questions/Q 6221739
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T08:11:13+00:00

The shadow created with :before and :after goes under the parent div . How

  • 0

The shadow created with :before and :after goes under the parent div. How can I fix it? The shadow of the parent div works fine.

enter image description here

CSS:

article {
    display: block;
    position: relative;
    width: 90%;
    background: #ccc;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 1.5em;
    color: rgba(0,0,0, .8);
    text-shadow: 0 1px 0 #fff;
    line-height: 1.5;
    text-align: center;
    display: block;
    margin: 20em auto;
}


article:before, article:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width:300px;
    background: rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);   
    -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform: rotate(-3deg);    
    -moz-transform: rotate(-3deg);   
    -o-transform: rotate(-3deg);
}

article:after {
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    right: 10px;
    left: auto;
}

HTML:

<body>
    <div>
        <table>
            <tr>
                <td>
                    <div>this div has also a nice shadow effect (works), but created with another div by z-index:-1;
                        <article>
                            <p>this will have a nice shadow effect(doesnt work)</p>
                        </article>
                    </div>
                    ...
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    JS fiddle of the posted code, cleaned up a bit.

    The :before and :after pseudo-selectors allow you to add content to the text node of the element. You cannot add additional elements or nodes into the DOM using these pseudo-selectors.

    I’m not sure what content you’re wanting to style since you’re appending a blank string, but right now you’re trying to add a box shadow to text.

    Additionally, you have completely garbled indention in your CSS, and you have some rogue HTML tags. You should spend 12 seconds looking at the code you posted up for us to spend time reading in order to deduce and help with your misunderstanding; if you respect our time by spending time on your question, you would get better help.

    • 0