为什么css选择器之前和之后不工作？

Question

我已经开始使用:: before和:: after但是当我尝试制作某些东西时，我似乎无法在屏幕上显示三角形。这是我的代码。

的index.php

<div class="menu">

    </div>

外部的style.css

.menu{
    height: 50px;
    width: 50px;
    background: red;
}
.menu::before{
    width: 0;
    height: 0;
    border-left: 115px solid transparent;
    border-right: 115px solid transparent;
    border-top: 115px solid #222;
}

有人可以告诉我这件事我做错了吗？