CSS: после + Z-индекс ⇐ Html

[Anonymous]

Я пытаюсь создать поле сообщения со стрелкой для указания. Я хочу использовать: After Pseudo Element для стрелки, чтобы избежать дополнительного HTML, и я хочу, чтобы псевдо-элемент наследовал тень своего родителя. Lang-CSS PrettyPrint-Override ">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;
}< /code>

Some test message here
< /code>
< /div>
< /div>
< /p>
Я просто не могу заставить этот псевдо -элемент отступить за родителем. Может ли кто -нибудь из вас выяснить, куда я ошибаюсь?


Подробнее здесь: https://stackoverflow.com/questions/134 ... er-z-index