CODEWITHSUNDEEP
htmlcsspseudo-element
Case
Case

Reputation: 4274

:before Pseudo element behind absolute positioned parent

Attempting to put a shadow on an image, and I need to put the :before or :after behind the parent in order to have it work. Any suggestions would be wonderful.

.g-w-a {
    background-repeat: no-repeat;
    display: block;
    height: 240px;
    position: absolute;
    width: 160px;
    background-color: rgba(255, 0, 0, 0.5);
}

.g-w-a::after {
    background-color: rgba(0, 0, 0, 1);
    content: "";
    height: 20px;
    left: 40px;
    position: absolute;
    top: 210px;
    width: 50px;
    z-index: -2;
}

<div style="background-image: url(http://static.soliaonline.com/a/ae4329867a01e99b6b8ddbeb3d1c6f03.png)" class="g-w-a"><div class="t-shad">Rasen</div></div>

https://jsfiddle.net/bunzons9/1/

Upvotes: 1

Views: 1123

Answers (1)

kanudo
kanudo

Reputation: 2219

.g-w-a {
        background-repeat: no-repeat;
        display: block;
        position:relative;
        height: 240px;
        width: 160px;
        background-color: rgba(255, 0, 0, 0.5);
    }
    
    .g-w-a::after {
        background-color: rgba(0, 0, 0, 1);
        content: "";
        height: 240px;
        width: 160px;
        left: 10px;
        top: 10px;
        position: absolute;
        z-index: -2;
    }
    
    <div style="background-image: url(http://static.soliaonline.com/a/082b36bc93e690cfda70e57e7eb86dac.png)" class="g-w-a"><div class="t-shad">Rasen</div></div>

Upvotes: 2

Related Questions