CSS :after + z-index

Question

I'm trying to create a message box with a down pointing arrow. I want to use the :after pseudo element for the arrow to avoid extra HTML, and I want the pseudo element to inherit the box-shadow of its parent.

My attempt:

main {
    padding: 30px;
}

div {
    width: 180px;
    height: 30px;
    line-height: 30px;
    background: #EC5F54;
    border-radius: 8px;
    text-align: center;
    color: white;
    font-family: Arial,Verdana,sans-serif;
    font-size: 13px;
    box-shadow: 0 1px 2px #999999;
    position: relative;
}

div:after {                        
    height: 20px;
    width: 20px;
    background: #EC5F54;
    content: '';
    -webkit-transform: rotate(45deg);
    box-shadow: inherit;
    position: absolute;
    left: 80px;
    top: 18px;
    z-index: -1px;
}

<main>
  <div>Some test message here</div>
</main>

I just can't get that pseudo element to go behind the parent. Can any of you figure out where I'm going wrong?

Answer 1

You used -1px for z-index, z-index is not measured in pixels, just numbers, make it -1 and it works as intended